chore: add button to toggle theme in demo-app (#3093)

* 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.

* Improve list-demo in dark-theme

* Fix stylelint

* Address comments

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-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'));