diff --git a/angular.json b/angular.json index a7943c1..8e75f2f 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,6 @@ "src/assets" ], "styles": [ - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss" ], "scripts": [] diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss new file mode 100644 index 0000000..e86ed69 --- /dev/null +++ b/src/app/app.theme.scss @@ -0,0 +1,125 @@ +// ----------------------------------------------------------------------------------------------------- +// @ Custom color maps +// ----------------------------------------------------------------------------------------------------- +$navy-app-theme: ( + 50: #ECECEE, + 100: #C5C6CB, + 200: #9EA1A9, + 300: #7D818C, + 400: #5C616F, + 500: #E89759, + 600: #353A48, + 700: #2D323E, + 800: #262933, + 900: #1E2129, + A100: #C5C6CB, + A200: #9EA1A9, + A400: #5C616F, + A700: #2D323E, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $light-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $light-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ) +); + +$apside-primary-app-theme: ( + 50: #ECECEE, + 100: #C5C6CB, + 200: #9EA1A9, + 300: #7D818C, + 400: #5C616F, + 500: #E89759, + 600: #353A48, + 700: #2D323E, + 800: #262933, + 900: #1E2129, + A100: #C5C6CB, + A200: #9EA1A9, + A400: #5C616F, + A700: #2D323E, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $light-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $light-primary-text, + A400: $light-primary-text, + A700: $light-primary-text, + ) +); + +// ----------------------------------------------------------------------------------------------------- +// @ Define the default theme +// ----------------------------------------------------------------------------------------------------- + +// Define the primary, accent and warn palettes +$default-primary-palette: mat-palette($navy-app-theme); +$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700); +$default-warn-palette: mat-palette($mat-red); + +// Create the Material theme object +$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette); + +// Add ".theme-default" class to the body to activate this theme. +// Class name must start with "theme-" !!! +.theme-default { + + // Create an Angular Material theme from the $theme map + @include angular-material-theme($theme); +} + +// ----------------------------------------------------------------------------------------------------- +// @ Define a blue-gray dark theme +// ----------------------------------------------------------------------------------------------------- + +// Define the primary, accent and warn palettes +$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme); +$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray); +$blue-gray-dark-theme-warn-palette: mat-palette($mat-red); + +// Create the Material theme object +$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette); + +// Add ".theme-blue-gray-dark" class to the body to activate this theme. +// Class name must start with "theme-" !!! +.theme-blue-gray-dark { + + // Generate the Angular Material theme + @include angular-material-theme($blue-gray-dark-theme); +} + + +// ----------------------------------------------------------------------------------------------------- +// @ Typography +// ----------------------------------------------------------------------------------------------------- + +// Angular Material typography +$typography: mat-typography-config( + $font-family: 'Muli, Helvetica Neue, Arial, sans-serif', + $title: mat-typography-level(20px, 32px, 600), + $body-2: mat-typography-level(14px, 24px, 600), + $button: mat-typography-level(14px, 14px, 600), + $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!! +); + +// Setup the typography +@include angular-material-typography($typography); \ No newline at end of file diff --git a/src/app/shared/nav-menu/nav-menu.component.html b/src/app/shared/nav-menu/nav-menu.component.html index 6dbfa72..5c45a8e 100644 --- a/src/app/shared/nav-menu/nav-menu.component.html +++ b/src/app/shared/nav-menu/nav-menu.component.html @@ -1,5 +1,5 @@
- + @@ -20,6 +20,7 @@ + diff --git a/src/app/shared/nav-menu/nav-menu.component.ts b/src/app/shared/nav-menu/nav-menu.component.ts index abcfa76..c340eb6 100644 --- a/src/app/shared/nav-menu/nav-menu.component.ts +++ b/src/app/shared/nav-menu/nav-menu.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, Inject } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; import { AuthService } from '@shared/auth/auth.service'; import { Role } from '@shared/utils/roles'; @@ -29,7 +30,9 @@ export class NavMenuComponent { */ userInfo : string; - constructor(private authService : AuthService){ + isDarkTheme: boolean = false; + + constructor(@Inject(DOCUMENT) private document: any, private authService : AuthService){ this.userRole = authService.firstRole; this.userInfo = authService.userInfo; } @@ -41,4 +44,26 @@ export class NavMenuComponent { this.authService.logout(); } + toggleTheme() { + this.isDarkTheme = !this.isDarkTheme; + + this.updateTheme(); + } + + updateTheme() + { + // Color theme - Use normal for loop for IE11 compatibility + for ( let i = 0; i < this.document.body.classList.length; i++ ) + { + const className = this.document.body.classList[i]; + + if ( className.startsWith('theme-') ) + this.document.body.classList.remove(className); + } + + if (!this.isDarkTheme) + this.document.body.classList.add('theme-default'); + else + this.document.body.classList.add('theme-blue-gray-dark'); + } } diff --git a/src/index.html b/src/index.html index 6297d38..038df40 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ - + diff --git a/src/styles.scss b/src/styles.scss index 7e7239a..e7c56bd 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,24 @@ -/* You can add global styles to this file, and also import other style files */ +@import '~@angular/material/theming'; +@include mat-core(); + +// Import app.theme.scss +@import "app/app.theme"; + + +.bg-apside-primary +{ + background-color: #183650 !important; +} + +.bg-apside-secondary +{ + background-color: #E89759 !important; +} + +.apside-secondary +{ + color: #E89759 !important; +} html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }