apply the multiple theme for the angular material

by using the newest method which fix the overlay bug.

but there is still has some problems:

1. input placeholder
2. select placeholder and underline
3. slide bar

ref issues:
[multiple themes don't work with overlay-based components](angular/components#2662)
[Some sass selector expressions don't work when nested in a theme class](angular/components#4077)

.angular-cli.json

@@ -19,7 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "multi-themes.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
+    "node-sass": "^4.5.2",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },

src/app/app.component.html

@@ -6,3 +6,11 @@ <h1>
     <input mdInput placeholder="Favorite food" value="Sushi">
   </md-input-container>
 </md-card>
+<div class="deep-purple-amber">
+  <md-card>
+    <md-input-container>
+      <input mdInput placeholder="Favorite food" value="Sushi">
+    </md-input-container>
+  </md-card>
+</div>
+

src/app/app.module.ts

@@ -62,6 +62,7 @@ import {
 })
 export class AppModule {
   constructor(public overlayContainer: OverlayContainer) {
-    overlayContainer.themeClass = 'red-indigo';
+    //https://github.com/angular/material2/pull/2967/commits/3e6d57d80f556704f3e4a828061992c7012e925a
+    overlayContainer.themeClass = 'deep-purple-amber';
   }
 }

src/multi-themes.scss

@@ -0,0 +1,83 @@
+@import '~@angular/material/theming';
+//the theme list
+// light
+//1. indigo-pink
+//2. deep-purple-amber
+//3. pink-blue-grey
+//4. purple-green
+//6. orange-cyan
+// dark
+
+@include mat-core();
+// Define a theme.
+$primary: mat-palette($mat-indigo, 700, 500, 800);
+$accent:  mat-palette($mat-pink, A200, A100, A400);
+$theme: mat-light-theme($primary, $accent);
+
+// Include all theme styles for the components.
+@include angular-material-theme($theme);
+.pink-indigo{
+  $primary: mat-palette($mat-pink);
+  $accent:  mat-palette($mat-indigo, A200, A100, A400);
+  $theme: mat-light-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+
+.deep-purple-amber{
+  $primary: mat-palette($mat-deep-purple);
+  $accent:  mat-palette($mat-amber, A200, A100, A400);
+  $theme: mat-light-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.pink-blue-grey{
+  $primary: mat-palette($mat-pink);
+  $accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+  $theme: mat-light-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.purple-green{
+  $primary: mat-palette($mat-purple);
+  $accent:  mat-palette($mat-green, A200, A100, A400);
+  $theme: mat-light-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.orange-cyan{
+  $primary: mat-palette($mat-orange);
+  $accent:  mat-palette($mat-cyan, A200, A100, A400);
+  $theme: mat-light-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+
+
+//dark
+.dark-pink-indigo{
+  $primary: mat-palette($mat-pink);
+  $accent:  mat-palette($mat-indigo, A200, A100, A400);
+  $theme: mat-dark-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+
+.dark-deep-purple-amber{
+  $primary: mat-palette($mat-deep-purple);
+  $accent:  mat-palette($mat-amber, A200, A100, A400);
+  $theme: mat-dark-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.dark-pink-blue-grey{
+  $primary: mat-palette($mat-pink);
+  $accent:  mat-palette($mat-blue-grey, A200, A100, A400);
+  $theme: mat-dark-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.dark-purple-green{
+  $primary: mat-palette($mat-purple);
+  $accent:  mat-palette($mat-green, A200, A100, A400);
+  $theme: mat-dark-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}
+.dark-orange-cyan{
+  $primary: mat-palette($mat-orange);
+  $accent:  mat-palette($mat-cyan, A200, A100, A400);
+  $theme: mat-dark-theme($primary, $accent);
+  @include angular-material-theme($theme);
+}