update: add button to toggle theme in demo-app

* Adds a button to the demo-app toolbar that allows developers to quickly change between dark and light Material themes.
  This is very useful when building new components or just when confirming that all components work with dark themes.

Author: devversion

src/demo-app/button/button-demo.scss

@@ -8,7 +8,6 @@
   section {
     display: flex;
     align-items: center;
-    background-color: #f7f7f7;
     margin: 8px;
   }
 

src/demo-app/demo-app/demo-app.html

@@ -1,41 +1,46 @@
-<md-sidenav-container class="demo-root" fullscreen>
-  <md-sidenav #start>
-    <md-nav-list>
-      <a *ngFor="let navItem of navItems"
-         md-list-item
-         (click)="start.close()"
-         [routerLink]="[navItem.route]">
-        {{navItem.name}}
-      </a>
+<!-- Theme class needs to be applied above sidenav-container to style content background. -->
+<div [class.demo-dark-theme]="isDarkTheme">
+  <md-sidenav-container class="demo-root" fullscreen>
+    <md-sidenav #start>
+      <md-nav-list>
+        <a *ngFor="let navItem of navItems"
+           md-list-item
+           (click)="start.close()"
+           [routerLink]="[navItem.route]">
+          {{navItem.name}}
+        </a>
 
-      <hr>
+        <hr>
 
-      <a md-list-item
-         (click)="start.close()"
-         [routerLink]="['baseline']">
-        Baseline
-      </a>
-    </md-nav-list>
-    <button md-button (click)="start.close()">CLOSE</button>
-  </md-sidenav>
-  <div>
-    <md-toolbar color="primary">
-      <button md-icon-button (click)="start.open()">
-        <md-icon class="md-24" >menu</md-icon>
-      </button>
-      <div class="demo-toolbar">
-        <h1>Angular Material Demos</h1>
-        <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-          Fullscreen
+        <a md-list-item
+           (click)="start.close()"
+           [routerLink]="['baseline']">
+          Baseline
+        </a>
+      </md-nav-list>
+      <button md-button (click)="start.close()">CLOSE</button>
+    </md-sidenav>
+    <div>
+      <md-toolbar color="primary">
+        <button md-icon-button (click)="start.open()">
+          <md-icon class="md-24" >menu</md-icon>
         </button>
-        <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
-          {{root.dir.toUpperCase()}}
-        </button>
-      </div>
-    </md-toolbar>
+        <div class="demo-toolbar">
+          <h1>Angular Material Demos</h1>
+          <span class="demo-flex-fill"></span>
+          <button md-button (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
+          <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
+            Fullscreen
+          </button>
+          <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+            {{root.dir.toUpperCase()}}
+          </button>
+        </div>
+      </md-toolbar>
 
-    <div #root="$implicit" dir="ltr" class="demo-content">
-      <router-outlet></router-outlet>
+      <div #root="$implicit" dir="ltr" class="demo-content">
+        <router-outlet></router-outlet>
+      </div>
     </div>
-  </div>
-</md-sidenav-container>
+  </md-sidenav-container>
+</div>

src/demo-app/demo-app/demo-app.scss

@@ -1,3 +1,19 @@
+// The default indigo-pink theme will load through the index file. This makes the SCSS build faster
+// since Sass doesn't need to build a "prebuilt" theme again.
+@import '../../lib/core/theming/all-theme';
+
+.demo-dark-theme {
+  // Include core material styles.
+  @include mat-core();
+
+  $primary: mat-palette($mat-indigo);
+  $accent:  mat-palette($mat-pink);
+  $dark-theme: mat-dark-theme($primary, $accent);
+
+  // Include component styles with the given theme.
+  @include angular-material-theme($dark-theme);
+}
+
 body {
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 
@@ -31,7 +47,6 @@ body {
 
     .demo-toolbar {
       display: flex;
-      justify-content: space-between;
       width: 100%;
     }
   }
@@ -41,6 +56,11 @@ body {
   }
 }
 
+// Fills remaining flex space.
+.demo-flex-fill {
+  flex: 1 1 auto;
+}
+
 // stretch to screen size in fullscreen mode
 .demo-content {
   width: 100%;

src/demo-app/demo-app/demo-app.ts

@@ -19,6 +19,10 @@ export class Home {}
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoApp {
+
+  /** Whether the demo-app should use a dark theme or not. */
+  isDarkTheme: boolean = false;
+
   navItems = [
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},

src/demo-app/radio/radio-demo.scss

@@ -4,7 +4,6 @@
 }
 
 .demo-section {
-  background-color: #f7f7f7;
   margin: 8px;
   padding: 16px;
 

src/demo-app/tabs/tabs-demo.scss

@@ -1,9 +1,6 @@
 .demo-nav-bar {
   border: 1px solid #e0e0e0;
   margin-bottom: 40px;
-  .mat-tab-nav-bar {
-    background: #f9f9f9;
-  }
   sunny-routed-content,
   rainy-routed-content,
   foggy-routed-content {
@@ -15,9 +12,6 @@
 .demo-tab-group {
   border: 1px solid #e0e0e0;
   margin-bottom: 40px;
-  .mat-tab-header {
-    background: #f9f9f9;
-  }
   .mat-tab-body-content {
     padding: 12px;
   }