Added dark mode support

Author: giri3sg

angular.json

@@ -28,7 +28,7 @@
                 "output": "/"
               }
             ],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -81,7 +81,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": ["src/styles.css"],
+            "styles": ["src/styles.scss"],
             "assets": [
               {
                 "glob": "**/*",

src/app/app.component.html

@@ -1,6 +1,12 @@
 <mat-toolbar color="primary" style="display: flex;justify-content: space-between;">
   <div class="page-title">{{'Angular Update Guide'|i18n}}</div>
   <div style="flex-grow:1"></div>
+  <div style="margin:16px;">
+    <button mat-icon-button (click)="toggleTheme()">
+      <mat-icon *ngIf="!darkMode">dark_mode</mat-icon>
+      <mat-icon *ngIf="darkMode">light_mode</mat-icon>
+    </button>
+  </div>
   <div style="margin:16px;">
     <a href="https://angular.io/guide/updating" style="color: white; display: flex;">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24" >

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { AnalyticsService } from './analytics.service';
 import { getLocalizedAction, currentLocale } from './localization';
 import { I18nPipe } from './i18n.pipe';
 import { Clipboard } from '@angular/cdk/clipboard';
+import {ThemeService} from "./theme/theme.service";
 
 interface Option {
   id: string;
@@ -75,15 +76,19 @@ export class AppComponent {
    * Only save the locale in the URL if it was already there, or the user changed it
    */
   saveLocale = false;
-
+  darkMode: boolean = false;
   steps: Step[] = RECOMMENDATIONS;
 
   constructor(
     public location: Location,
     public track: AnalyticsService,
     public i18Service: I18nPipe,
-    private clipboard: Clipboard
+    private clipboard: Clipboard,
+    private readonly themeService: ThemeService
   ) {
+    if(this.themeService.getSavedTheme() === this.themeService.darkTheme){
+      this.toggleTheme(false)
+    }
     this.optionList =  [
       { id: 'ngUpgrade', name: 'ngUpgrade', description: i18Service.transform('to combine AngularJS & Angular') },
       { id: 'material', name: 'Angular Material', description: '' },
@@ -298,6 +303,11 @@ export class AppComponent {
     this.saveLocale = true;
     this.showUpdatePath();
   }
+
+  toggleTheme(useStorage: boolean = true) {
+    this.themeService.setTheme(useStorage);
+    this.darkMode = this.themeService.isDarkMode();
+  }
 }
 
 /** Whether or not the user is running on a Windows OS. */

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { Location, LocationStrategy, PathLocationStrategy } from '@angular/commo
 
 import './locales';
 import { I18nPipe } from './i18n.pipe';
+import {MatIconModule} from "@angular/material/icon";
 
 @NgModule({
   declarations: [AppComponent, I18nPipe],
@@ -31,6 +32,7 @@ import { I18nPipe } from './i18n.pipe';
     MatGridListModule,
     MatProgressBarModule,
     MatButtonToggleModule,
+    MatIconModule,
     MatMenuModule,
   ],
   providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }],

src/app/theme/theme.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private readonly localStorageKey = "theme-id";
+  public readonly darkTheme = "dark-theme";
+  public readonly lightTheme = "light-theme";
+
+  setTheme(useStorage: boolean) {
+    let updatedClasses: string;
+    let darkMode: boolean = false;
+    const bodyTag = document.getElementsByTagName("body")
+    if (bodyTag) {
+      const bodyClasses: string = bodyTag[0]?.getAttribute("class") || "";
+      if (bodyClasses.includes(this.darkTheme)) {
+        updatedClasses = bodyClasses.replace(this.darkTheme, "");
+      } else {
+        darkMode = true;
+        updatedClasses = `${bodyClasses} ${this.darkTheme}`;
+      }
+      bodyTag[0]?.setAttribute("class", updatedClasses);
+    }
+    if (useStorage) {
+      this.updateLocalStorage(darkMode)
+    }
+  }
+
+  updateLocalStorage(darkMode: boolean) {
+    localStorage.setItem(this.localStorageKey, darkMode ? this.darkTheme : this.lightTheme)
+  }
+
+  getSavedTheme() {
+    return localStorage.getItem(this.localStorageKey)
+  }
+
+  isDarkMode() {
+    const bodyTag = document.getElementsByTagName("body");
+    if (bodyTag) {
+      return bodyTag[0]?.getAttribute("class")?.includes(this.darkTheme) || false;
+    }
+    return false;
+  }
+}

src/index.html

@@ -8,6 +8,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>

src/styles.css renamed to src/styles.scss

@@ -1,6 +1,47 @@
+@use '@angular/material' as mat;
+@import "@angular/material/prebuilt-themes/pink-bluegrey.css";
 @import "@angular/material/prebuilt-themes/indigo-pink.css";
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+@include mat.core();
+
+$dark-theme: mat.define-dark-theme((
+color: (
+primary: mat.define-palette(mat.$pink-palette),
+secondary: mat.define-palette(mat.$blue-grey-palette),
+accent: mat.define-palette(mat.$red-palette)
+),
+typography: mat.define-typography-config(),
+density: 0,
+));
+
+.dark-theme {
+  background: #303030;
+  @include mat.all-component-themes($dark-theme);
+  color: #fff;
+h1, h2, h3, h4, h5, h6, p, li, ul, ol, td, th, table {
+  color: #fff;
+}
+a {
+  color: #f48fb1;
+}
+a:hover {
+  color: #ffb0c7;
+}
+code {
+  background: #ffffff0f;
+&:hover{
+   background: #ffffff4a;
+ }
+&:hover:after {
+   background: #e91e63;
+ }
+
+&:hover:before {
+   background: #404040;
+ }
+}
+}
 
 * {
   margin: 0;