added button to change styles

Aam-Digital · Aug 1, 2023 · 5c77d5b · 5c77d5b
1 parent 74b0191
commit 5c77d5b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 6 deletions.
diff --git a/src/app/core/ui/ui/ui.component.html b/src/app/core/ui/ui/ui.component.html
@@ -45,6 +45,7 @@
 
     <app-language-select *ngIf="showLanguageSelect"></app-language-select>
   </div>
+  <button (click)="changeColor()" mat-button>Change style</button>
 </mat-toolbar>
 
 <!-- MAIN NAVIGATION + CONTENT -->

diff --git a/src/app/core/ui/ui/ui.component.ts b/src/app/core/ui/ui/ui.component.ts
@@ -84,13 +84,13 @@ export class UiComponent {
     private titleService: Title,
     private configService: ConfigService,
     private screenWidthObserver: ScreenWidthObserver,
-    private router: Router
+    private router: Router,
   ) {
     this.screenWidthObserver
       .platform()
       .pipe(untilDestroyed(this))
       .subscribe(
-        (isDesktop) => (this.sideNavMode = isDesktop ? "side" : "over")
+        (isDesktop) => (this.sideNavMode = isDesktop ? "side" : "over"),
       );
     this.configService.configUpdates
       .pipe(untilDestroyed(this))
@@ -126,4 +126,22 @@ export class UiComponent {
       this.sideNav.close();
     }
   }
+
+  changeColor() {
+    document.documentElement.style.setProperty("--primary-50", "#e2f6fe");
+    document.documentElement.style.setProperty("--primary-100", "#b5e7fb");
+    document.documentElement.style.setProperty("--primary-200", "#84d8f9");
+    document.documentElement.style.setProperty("--primary-300", "#55c8f6");
+    document.documentElement.style.setProperty("--primary-400", "#32bcf5");
+    document.documentElement.style.setProperty("--primary-500", "#14b0f4");
+    document.documentElement.style.setProperty("--primary-600", "#0fa2e5");
+    document.documentElement.style.setProperty("--primary-700", "#068fd2");
+    document.documentElement.style.setProperty("--primary-800", "#067ebe");
+    document.documentElement.style.setProperty("--primary-900", "#005e9c");
+    document.documentElement.style.setProperty("--primary-A100", "#9DBFFF");
+    document.documentElement.style.setProperty("--primary-A200", "#6A9EFF");
+    document.documentElement.style.setProperty("--primary-A400", "#377DFF");
+    document.documentElement.style.setProperty("--primary-A700", "#1E6CFF");
+    document.documentElement.style.setProperty("--font-family", "fantasy");
+  }
 }
diff --git a/src/app/features/matching-entities/matching-entities/matching-entities.component.scss b/src/app/features/matching-entities/matching-entities/matching-entities.component.scss
@@ -27,7 +27,6 @@
 .selection-header {
   font-weight: 500;
   font-size: medium;
-  font-family: Roboto, sans-serif;
 }
 
 .entity-fixed {

diff --git a/src/styles/themes/ndb-theme.scss b/src/styles/themes/ndb-theme.scss
@@ -3,5 +3,5 @@
 
 // Include non-theme styles for core.
 @include mat.core();
+@include mat.typography-hierarchy(ndb-theme.$typography);
 @include mat.all-component-themes(ndb-theme.$theme);
-@include mat.all-component-typographies()
diff --git a/src/styles/variables/_ndb-light-theme.scss b/src/styles/variables/_ndb-light-theme.scss
@@ -2,17 +2,65 @@
  The main light theme for the application
  */
 @use "@angular/material" as mat;
+$dark-primary-text: rgba(black, 0.87);
+$dark-secondary-text: rgba(black, 0.54);
+$dark-disabled-text: rgba(black, 0.38);
+$dark-dividers: rgba(black, 0.12);
+$dark-focused: rgba(black, 0.12);
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.7);
+$light-disabled-text: rgba(white, 0.5);
+$light-dividers: rgba(white, 0.12);
+$light-focused: rgba(white, 0.12);
+
+$primary-palette: (
+        50: var(--primary-50, #fff3e0),
+        100: var(--primary-100, #ffe0b2),
+        200: var(--primary-200, #ffcc80),
+        300: var(--primary-300, #ffb74d),
+        400: var(--primary-400, #ffa726),
+        500: var(--primary-500, #ff9800),
+        600: var(--primary-600, #fb8c00),
+        700: var(--primary-700, #f57c00),
+        800: var(--primary-800, #ef6c00),
+        900: var(--primary-900, #e65100),
+        A100: var(--primary-A100, #ffd180),
+        A200: var(--primary-A200, #ffab40),
+        A400: var(--primary-A400, #ff9100),
+        A700: var(--primary-A700, #ff6d00),
+        contrast: (
+                50: $dark-primary-text,
+                100: $dark-primary-text,
+                200: $dark-primary-text,
+                300: $dark-primary-text,
+                400: $dark-primary-text,
+                500: $dark-primary-text,
+                600: $dark-primary-text,
+                700: $dark-primary-text,
+                800: $light-primary-text,
+                900: $light-primary-text,
+                A100: $dark-primary-text,
+                A200: $dark-primary-text,
+                A400: $dark-primary-text,
+                A700: black,
+        )
+);
 
 // Define the applications theme.
-$primary  : mat.define-palette(mat.$orange-palette);
+$primary  : mat.define-palette($primary-palette);
 $accent   : mat.define-palette(mat.$blue-palette, A200, A100, A400);
 $warn     : mat.define-palette(mat.$red-palette);
 
+$typography: mat.define-typography-config(
+    $font-family: var(--font-family, sans-serif),
+);
+
 // Create the theme object (a Sass map containing all of the palettes).
 $theme: mat.define-light-theme((
   color: (
     primary: $primary,
     accent: $accent,
     warn: $warn
-  )
+  ),
+  typography: $typography
 ));