demo: add dark theme to demo app (#4479)

Author: mmalerba

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

@@ -25,6 +25,7 @@
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
+        <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
         <button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
           Fullscreen
         </button>

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

@@ -15,9 +15,14 @@ export class Home {}
   selector: 'demo-app',
   templateUrl: 'demo-app.html',
   styleUrls: ['demo-app.css'],
+  host: {
+    '[class.unicorn-dark-theme]': 'dark',
+  },
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoApp {
+  dark = false;
+
   navItems = [
     {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},

src/demo-app/index.html

@@ -9,6 +9,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="dist/packages/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+  <link href="theme.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/theme.scss

@@ -0,0 +1,29 @@
+@import '../../dist/packages/material/core/theming/all-theme';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core();
+
+// Define the default theme (same as the example above).
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
+$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
+
+// Include the default theme styles.
+@include angular-material-theme($candy-app-theme);
+
+
+// Define an alternate dark theme.
+$dark-primary: mat-palette($mat-blue-grey);
+$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
+$dark-warn:    mat-palette($mat-deep-orange);
+$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+// Include the alternative theme styles inside of a block with a CSS class. You can make this
+// CSS class whatever you want. In this example, any component inside of an element with
+// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
+.unicorn-dark-theme {
+  @include angular-material-theme($dark-theme);
+}