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

Author: Splaktar

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

@@ -33,7 +33,9 @@ <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.isDark = !this.theme.isDark">
+            {{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,10 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {OverlayContainer} from '@angular/cdk/overlay';
 import {ChangeDetectorRef, Component, ElementRef, Inject, 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({
@@ -20,7 +20,6 @@ import {DevAppDirectionality} from './dev-app-directionality';
   encapsulation: ViewEncapsulation.None,
 })
 export class DevAppLayout {
-  dark = false;
   navItems = [
     {name: 'Examples', route: '/examples'},
     {name: 'Autocomplete', route: '/autocomplete'},
@@ -85,8 +84,8 @@ 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());
   }
@@ -104,18 +103,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,65 @@
+/**
+ * @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 {Inject, Injectable} from '@angular/core';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {DOCUMENT} from '@angular/common';
+
+const isDarkThemeKey = 'isDarkTheme';
+
+@Injectable({providedIn: 'root'})
+export class DevAppTheme {
+  readonly darkThemeClass = 'demo-unicorn-dark-theme';
+  private _isDark = false;
+
+  constructor(private _overlayContainer: OverlayContainer,
+              @Inject(DOCUMENT) private _document: Document) {
+    let isDark: string | null;
+    try {
+      isDark = localStorage.getItem(isDarkThemeKey);
+      if (isDark != null) {
+        this._isDark = isDark === 'true';
+        this._isDark ? this.applyDarkTheme() : this.applyLightTheme();
+      }
+    } catch (error) {
+      console.error(`Failed to read ${isDarkThemeKey} from localStorage: `, error);
+    }
+  }
+
+  get isDark(): boolean {
+    return this._isDark;
+  }
+
+  set isDark(value: boolean) {
+    if (value != null) {
+      this._isDark = value;
+
+      if (this._isDark) {
+        this.applyDarkTheme();
+      } else {
+        this.applyLightTheme();
+      }
+
+      try {
+        localStorage.setItem(isDarkThemeKey, String(value));
+      } catch (error) {
+        console.error(`Failed to write ${isDarkThemeKey} to localStorage: `, error);
+      }
+    }
+  }
+
+  applyDarkTheme() {
+    this._document.body.classList.add(this.darkThemeClass);
+    this._overlayContainer.getContainerElement().classList.add(this.darkThemeClass);
+  }
+
+  applyLightTheme() {
+    this._document.body.classList.remove(this.darkThemeClass);
+    this._overlayContainer.getContainerElement().classList.remove(this.darkThemeClass);
+  }
+}