From 4e80434f23f84e0a7ad7554c3f85d48da024c59c Mon Sep 17 00:00:00 2001
From: Jeremy Smartt <jeremysmartt@users.noreply.github.com>
Date: Fri, 20 Oct 2017 15:24:56 -0700
Subject: [PATCH] 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 +
 src/app/app.component.ts                          | 7 +++++++
 src/app/components/toolbar/toolbar.component.html | 8 ++++++++
 src/app/components/toolbar/toolbar.component.ts   | 7 +++++++
 4 files changed, 23 insertions(+)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4174925570..f7e1b1b0df 100644
--- a/src/app/app.component.html
+++ b/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'">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 76d96cb69d..e58682dc76 100644
--- a/src/app/app.component.ts
+++ b/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
diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
index 9610aff528..ed3570fa1c 100644
--- a/src/app/components/toolbar/toolbar.component.html
+++ b/src/app/components/toolbar/toolbar.component.html
@@ -48,5 +48,13 @@ <h4 matLine><span class="text-wrap">CDK and material@beta.12 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>
\ No newline at end of file
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
index f043f1bb44..f80b031cb7 100644
--- a/src/app/components/toolbar/toolbar.component.ts
+++ b/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);
+  }
 }