chore: store dev-app dark/light theme state in localStorage

Author: Splaktar

src/dev-app/dev-app/dev-app-layout.html

@@ -33,7 +33,7 @@ <h1>Angular Material Demos</h1>
           <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
             <mat-icon>fullscreen</mat-icon>
           </button>
-          <button mat-button (click)="toggleTheme()">{{dark ? 'Light' : 'Dark'}} theme</button>
+          <button mat-button (click)="theme.toggleTheme()">{{theme.isDark ? 'Light' : 'Dark'}} theme</button>
           <button mat-button (click)="rippleOptions.disabled = !rippleOptions.disabled">
             {{rippleOptions.disabled ? 'Enable' : 'Disable'}} ripples
           </button>

src/dev-app/dev-app/dev-app-layout.ts

@@ -7,10 +7,17 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {OverlayContainer} from '@angular/cdk/overlay';
-import {ChangeDetectorRef, Component, ElementRef, Inject, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core';
 import {DevAppRippleOptions} from './ripple-options';
 import {DevAppDirectionality} from './dev-app-directionality';
+import {DevAppTheme} from './dev-app-theme';
 
 /** Root component for the dev-app demos. */
 @Component({
@@ -19,8 +26,7 @@ import {DevAppDirectionality} from './dev-app-directionality';
   styleUrls: ['dev-app-layout.css'],
   encapsulation: ViewEncapsulation.None,
 })
-export class DevAppLayout {
-  dark = false;
+export class DevAppLayout implements OnInit {
   navItems = [
     {name: 'Examples', route: '/examples'},
     {name: 'Autocomplete', route: '/autocomplete'},
@@ -85,12 +91,16 @@ export class DevAppLayout {
   ];
 
   constructor(
-      private _element: ElementRef<HTMLElement>, private _overlayContainer: OverlayContainer,
-      public rippleOptions: DevAppRippleOptions,
+      private _element: ElementRef<HTMLElement>,
+      public rippleOptions: DevAppRippleOptions, public theme: DevAppTheme,
       @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) {
     dir.change.subscribe(() => cdr.markForCheck());
   }
 
+  ngOnInit(): void {
+    this.theme.elementToTheme = this._element.nativeElement;
+  }
+
   toggleFullscreen() {
     // Cast to `any`, because the typings don't include the browser-prefixed methods.
     const elem = this._element.nativeElement.querySelector('.demo-content') as any;
@@ -104,18 +114,4 @@ export class DevAppLayout {
       elem.msRequestFullScreen();
     }
   }
-
-  toggleTheme() {
-    const darkThemeClass = 'demo-unicorn-dark-theme';
-
-    this.dark = !this.dark;
-
-    if (this.dark) {
-      this._element.nativeElement.classList.add(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.add(darkThemeClass);
-    } else {
-      this._element.nativeElement.classList.remove(darkThemeClass);
-      this._overlayContainer.getContainerElement().classList.remove(darkThemeClass);
-    }
-  }
 }

src/dev-app/dev-app/dev-app-theme.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {OverlayContainer} from '@angular/cdk/overlay';
+
+const isDarkThemeKey = 'isDarkTheme';
+
+@Injectable({providedIn: 'root'})
+export class DevAppTheme {
+  readonly darkThemeClass = 'demo-unicorn-dark-theme';
+  private _elementToTheme: HTMLElement;
+  private _isDark = false;
+
+  constructor(private _overlayContainer: OverlayContainer) {
+    let isDark: string | null;
+    try {
+      isDark = localStorage.getItem(isDarkThemeKey);
+      if (isDark != null) {
+        this._isDark = isDark === 'true';
+      }
+    } catch (error) {
+      console.error(`Failed to read ${isDarkThemeKey} from localStorage: `, error);
+    }
+  }
+
+  get elementToTheme(): HTMLElement {
+    return this._elementToTheme;
+  }
+
+  set elementToTheme(value: HTMLElement) {
+    if (value != null) {
+      this._elementToTheme = value;
+      this.isDark ? this.applyDarkTheme() : this.applyLightTheme();
+    }
+  }
+
+  get isDark(): boolean {
+    return this._isDark;
+  }
+
+  set isDark(value: boolean) {
+    if (value != null) {
+      this._isDark = value;
+      try {
+        localStorage.setItem(isDarkThemeKey, String(value));
+      } catch (error) {
+        console.error(`Failed to write ${isDarkThemeKey} to localStorage: `, error);
+      }
+    }
+  }
+
+  toggleTheme() {
+    this.isDark = !this._isDark;
+
+    if (this._isDark) {
+      this.applyDarkTheme();
+    } else {
+      this.applyLightTheme();
+    }
+  }
+
+  applyDarkTheme() {
+    this.elementToTheme.classList.add(this.darkThemeClass);
+    this._overlayContainer.getContainerElement().classList.add(this.darkThemeClass);
+  }
+
+  applyLightTheme() {
+    this.elementToTheme.classList.remove(this.darkThemeClass);
+    this._overlayContainer.getContainerElement().classList.remove(this.darkThemeClass);
+  }
+}