Ajout thème sombre

angular.json

@@ -24,7 +24,6 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []

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);

src/app/shared/nav-menu/nav-menu.component.html

@@ -1,5 +1,5 @@
 <header>
-  <mat-card>
+  <mat-card class="bg-apside-secondary">
     <!--Mettre l'icon APSIDE-->
     <img routerLink="/home" src="../../assets/img/logo.png">
     <!--LIEN VERS HOME-->
@@ -20,6 +20,7 @@
     <mat-menu #menuMore="matMenu">
       <button mat-menu-item>A propos</button>
       <button mat-menu-item>Manuel utilisation</button>
+      <button mat-menu-item (click)="toggleTheme()">{{ isDarkTheme ? 'Thème clair' : 'Thème sombre' }}</button>
       <button mat-menu-item on-click="logout()">Déconnexion</button>
     </mat-menu>
   </mat-card>

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');
+  }
 }

src/index.html

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="theme-default mat-app-background">
   <app-root></app-root>
 </body>
 </html>

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; }