update: add button to toggle theme in demo-app

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-theme.scss

@@ -0,0 +1,16 @@
+@import '@angular/material/core/theming/all-theme';
+
+// Include core material styles.
+@include mat-core();
+
+$primary: mat-palette($mat-indigo);
+$accent:  mat-palette($mat-pink);
+
+$light-theme: mat-light-theme($primary, $accent);
+$dark-theme: mat-dark-theme($primary, $accent);
+
+@include angular-material-theme($light-theme);
+
+.demo-dark-theme {
+  @include angular-material-theme($dark-theme);
+}

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

@@ -31,7 +31,6 @@ body {
 
     .demo-toolbar {
       display: flex;
-      justify-content: space-between;
       width: 100%;
     }
   }
@@ -41,6 +40,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

@@ -15,10 +15,14 @@ export class Home {}
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app.html',
-  styleUrls: ['demo-app.css'],
+  styleUrls: ['demo-app.css', 'demo-app-theme.css'],
   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/index.html

@@ -8,7 +8,6 @@
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 
   <!-- FontAwesome for md-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

@@ -3,7 +3,7 @@ <h1>md-list demo</h1>
 
 <button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
 
-<div class="demo">
+<div class="list-demo">
   <div>
     <h2>Normal lists</h2>
 

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

@@ -1,5 +1,4 @@
-
-.demo {
+.list-demo {
   display: flex;
   flex-flow: row wrap;
 
@@ -9,20 +8,32 @@
     margin: 20px 20px 0 0;
 
   }
+
   h2 {
     margin-top: 20px;
   }
+}
+
+/* Theme for the list-item demo elements. */
+@mixin demo-list-item-theme($dark: false) {
+  $base-color: if($dark, white, black);
 
-  .mat-icon {
-    color: rgba(0, 0, 0, 0.12);
+  .list-demo .mat-icon {
+    color: rgba($base-color, 0.12);
   }
 
-  .mat-list-icon {
+  .list-demo .mat-list-icon {
     color: white;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba($base-color, 0.3);
+  }
+
+  .list-demo .demo-secondary-text {
+    color: rgba($base-color, 0.54);
   }
 }
 
-.demo-secondary-text {
-  color: rgba(0, 0, 0, 0.54);
+@include demo-list-item-theme(false);
+
+.demo-dark-theme {
+  @include demo-list-item-theme(true);
 }

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

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
   moduleId: module.id,
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrls: ['list-demo.css'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ListDemo {
   items: string[] = [

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;
   }

tools/gulp/constants.ts

@@ -17,6 +17,10 @@ export const SASS_AUTOPREFIXER_OPTIONS = {
   cascade: false,
 };
 
+export const SASS_PREPROCESSOR_OPTIONS = {
+  includePaths: [DIST_ROOT]
+};
+
 export const HTML_MINIFIER_OPTIONS = {
   collapseWhitespace: true,
   removeComments: true,

tools/gulp/task_helpers.ts

@@ -2,7 +2,10 @@ import * as child_process from 'child_process';
 import * as fs from 'fs';
 import * as gulp from 'gulp';
 import * as path from 'path';
-import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
+import {
+  NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS,
+  SASS_PREPROCESSOR_OPTIONS
+} from './constants';
 
 
 /** Those imports lack typings. */
@@ -44,7 +47,7 @@ export function sassBuildTask(dest: string, root: string) {
   return () => {
     return gulp.src(_globify(root, '**/*.scss'))
       .pipe(gulpSourcemaps.init())
-      .pipe(gulpSass().on('error', gulpSass.logError))
+      .pipe(gulpSass(SASS_PREPROCESSOR_OPTIONS).on('error', gulpSass.logError))
       .pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS))
       .pipe(gulpSourcemaps.write('.'))
       .pipe(gulp.dest(dest));

tools/gulp/tasks/aot.ts

@@ -12,7 +12,7 @@ task('aot:copy', [':build:devapp:scss', ':build:devapp:assets']);
  */
 task('aot:prepare', sequenceTask(
   'clean',
-  ['aot:copy', 'build:components:release', ':build:components:ngc'])
+  ['build:components:release', 'aot:copy', ':build:components:ngc'])
 );
 
 /** Builds the demo-app with the Angular compiler to verify that all components work. */

tools/gulp/tasks/development.ts

@@ -20,7 +20,7 @@ task(':watch:devapp', () => {
 
 task(':build:devapp:vendor', vendorTask());
 task(':build:devapp:ts', tsBuildTask(appDir));
-task(':build:devapp:scss', sassBuildTask(outDir, appDir));
+task(':build:devapp:scss', [':build:components:scss'], sassBuildTask(outDir, appDir));
 task(':build:devapp:assets', copyTask(appDir, outDir));
 task('build:devapp', buildAppTask('devapp'));