angular · BaronVonPerko · Dec 27, 2022 · Dec 27, 2022
diff --git a/angular.json b/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": "**/*",
@@ -117,7 +117,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "style": "css"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,4 @@
+<main [class]="mode" style="display: flex; flex-direction: column; height: 100vh;">
 <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>
@@ -13,6 +14,12 @@
     <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>github-circle-white-transparent</title><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="currentColor" fill-rule="evenodd"/></svg>
   </a>
   </div>
+  <div style="margin:16px;">
+    <a (click)="toggleMode()" style="color: white; display: flex; cursor: pointer;">
+      <mat-icon *ngIf="mode === 'light-mode'" title="Switch to dark mode" fontIcon="dark_mode">dark_mode</mat-icon>
+      <mat-icon *ngIf="mode === 'dark-mode'" title="Switch to light mode" fontIcon="light_mode">light_mode</mat-icon>
+    </a>
+  </div>
   <div style="margin:16px">
     <button mat-button style="margin:0;min-width: 0;padding:0;" [matMenuTriggerFor]="menu"><svg style="width:24px;height:24px;color:white;" viewBox="0 0 24 24">
       <path fill="currentColor" d="M12.87,15.07L10.33,12.56L10.36,12.53C12.1,10.59 13.34,8.36 14.07,6H17V4H10V2H8V4H1V6H12.17C11.5,7.92 10.44,9.75 9,11.35C8.07,10.32 7.3,9.19 6.69,8H4.69C5.42,9.63 6.42,11.17 7.67,12.56L2.58,17.58L4,19L9,14L12.11,17.11L12.87,15.07M18.5,10H16.5L12,22H14L15.12,19H19.87L21,22H23L18.5,10M15.88,17L17.5,12.67L19.12,17H15.88Z" />
@@ -31,6 +38,7 @@
 </div>
 
 </mat-toolbar>
+<mat-sidenav-container style="flex: 1;">
 <div class="page">
   <div class="wizard">
     <div>
@@ -143,3 +151,5 @@ <h3>{{'After you update'|i18n}}</h3>
     </div>
   </div>
 </div>
+</mat-sidenav-container>
+</main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -20,6 +20,12 @@ interface Option {
 })
 export class AppComponent {
   title = 'Angular Update Guide';
+  THEME_KEY = 'UPDATE_ANGULAR_THEME';
+  mode: 'dark-mode' | 'light-mode' = localStorage.getItem(this.THEME_KEY) === 'dark-mode' ? 'dark-mode' : 'light-mode';
+  toggleMode() {
+    this.mode = this.mode === 'light-mode' ? 'dark-mode' : 'light-mode';
+    localStorage.setItem(this.THEME_KEY, this.mode);
+  }
 
   level = 1;
   options: Record<string, boolean> = {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -12,6 +12,8 @@ import { MatListModule } from '@angular/material/list';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 
 import './locales';
@@ -22,6 +24,7 @@ import { I18nPipe } from './i18n.pipe';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    MatIconModule,
     MatToolbarModule,
     MatButtonModule,
     MatCheckboxModule,
@@ -32,6 +35,7 @@ import { I18nPipe } from './i18n.pipe';
     MatProgressBarModule,
     MatButtonToggleModule,
     MatMenuModule,
+    MatSidenavModule,
   ],
   providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }],
   bootstrap: [AppComponent],

diff --git a/src/index.html b/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>

diff --git a/src/styles.css → src/styles.scss b/src/styles.css → src/styles.scss
@@ -1,6 +1,7 @@
-@import "@angular/material/prebuilt-themes/indigo-pink.css";
+@use '@angular/material' as mat;
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+@include mat.core();
 
 * {
   margin: 0;
@@ -12,10 +13,6 @@ h1, h2, h3, h4 {
   padding: 16px 0;
 }
 
-h1, h2, h3, h4, h5, h6, p, li, ul, ol, td, th, table {
-  color: #333333;
-}
-
 .recommendations>*>div {
   margin-bottom: 16px;
   line-height: 1.75;
@@ -104,3 +101,37 @@ code:hover {
   cursor: pointer;
   position: relative;
 }
+
+.dark-mode {
+  $dark-theme: mat.define-dark-theme((
+    color: (
+      primary: mat.define-palette(mat.$indigo-palette, 500),
+      accent: mat.define-palette(mat.$pink-palette, 400)
+    ),
+    density: 0,
+  ));
+
+  @include mat.core-theme($dark-theme);
+  @include mat.core-color($dark-theme);
+  @include mat.button-color($dark-theme);
+  @include mat.all-component-themes($dark-theme);
+
+  code {
+    color: black;
+  }
+}
+
+.light-mode {
+  $light-theme: mat.define-light-theme((
+    color: (
+            primary: mat.define-palette(mat.$indigo-palette, 500),
+            accent: mat.define-palette(mat.$pink-palette, 400)
+    ),
+    density: 0,
+  ));
+
+  @include mat.core-theme($light-theme);
+  @include mat.core-color($light-theme);
+  @include mat.button-color($light-theme);
+  @include mat.all-component-themes($light-theme);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@