feat(theme): Add menu button to switch between dark and light themes (#…

…939)

* feat(theme): Add toggle button to switch between dark and light themes

* chore(): use `[]` rather than `{{}}` in class

src/app/app.component.html

@@ -1,4 +1,5 @@
 <td-layout #layout
+            [class]="activeTheme"
             [dir]="dir"
             [mode]="(media.registerQuery('gt-md') | async) ? 'side' : 'over'"
             [sidenavWidth]="(media.registerQuery('gt-md') | async) ? '257px' : '320px'">

src/app/app.component.ts

@@ -87,6 +87,13 @@ export class DocsAppComponent implements AfterViewInit {
     this.dir = getDirection();
   }
 
+  get activeTheme(): string {
+    return localStorage.getItem('theme');
+  }
+  theme(theme: string): void {
+    localStorage.setItem('theme', theme);
+  }
+
   ngAfterViewInit(): void {
     // broadcast to all listener observables when loading the page
     setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining

src/app/components/toolbar/toolbar.component.html

@@ -48,5 +48,13 @@ <h4 matLine><span class="text-wrap">CDK and [email protected] support</span></h4>
         <mat-icon>swap_horiz</mat-icon>
         <span>{{dir.toUpperCase()}}</span>
       </button>
+      <button mat-menu-item *ngIf="activeTheme === 'theme-dark'" (click)="theme('default-theme')">
+        <mat-icon>brightness_high</mat-icon>
+        <span>Light Mode</span>
+      </button>
+      <button mat-menu-item *ngIf="activeTheme != 'theme-dark'" (click)="theme('theme-dark')">
+        <mat-icon>brightness_low</mat-icon>
+        <span>Dark Mode</span>
+      </button>
     </mat-menu>
   </div>

src/app/components/toolbar/toolbar.component.ts

@@ -37,4 +37,11 @@ export class ToolbarComponent {
     this._dir.dir = dir;
     setDirection(dir);
   }
+
+  get activeTheme(): string {
+    return localStorage.getItem('theme');
+  }
+  theme(theme: string): void {
+    localStorage.setItem('theme', theme);
+  }
 }