title: Angular 5 Material multiple themes how to
body: <p>I have this file as my root scss :</p>
  
  <pre><code>@import '~@angular/material/theming';
  // 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);
  }
  </code></pre>
  
  <p>as per : <a href="https://material.angular.io/guide/theming#multiple-themes" rel="nofollow noreferrer">https://material.angular.io/guide/theming#multiple-themes</a></p>
  
  <p>I'm sorry but the guide is not much to go on. If you can see anything that I can please tell me. I read it five times top to bottom I can't find any clues. </p>
  
  <p>where to from here? </p>
  
  <p>if I try to do : </p>
  
  <pre><code>.main{
     background: $candy-app-primary;
  }
  </code></pre>
  
  <p>the app fails with :</p>
  
  <pre><code>Failed to compile.
  
  ./src/app/app.component.scss
  Module build failed: 
  undefined
              ^
        (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
        in C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\@angular\material\_theming.scss (line 1136, column 14)
   @ ./src/app/app.component.ts 20:21-52
   @ ./src/app/app.module.ts
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
  </code></pre>
  
  <p>I don't understand how I'm supposed to use Material multiple theme.</p>
  
  <p>here's my package.json :</p>
  
  <pre><code>{
    "name": "web.ui",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng b -prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.2.3",
      "@angular/cdk": "^5.2.2",
      "@angular/common": "^5.2.3",
      "@angular/compiler": "^5.2.3",
      "@angular/core": "^5.2.3",
      "@angular/forms": "^5.2.3",
      "@angular/http": "^5.2.3",
      "@angular/material": "^5.2.2",
      "@angular/platform-browser": "^5.2.3",
      "@angular/platform-browser-dynamic": "^5.2.3",
      "@angular/router": "^5.2.3",
      "angular-2-local-storage": "^1.0.1",
      "angular-font-awesome": "^3.1.2",
      "core-js": "^2.5.3",
      "exitzero": "^1.0.1",
      "font-awesome": "^4.7.0",
      "ng2-ion-range-slider": "^1.0.3",
      "parcel-plugin-inlinesvg": "0.0.12",
      "rxjs": "^5.5.6",
      "typeface-comfortaa": "0.0.54",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.20"
    },
    "devDependencies": {
      "@angular/cli": "1.7.0",
      "@angular/compiler-cli": "^5.2.3",
      "@angular/language-service": "^5.2.3",
      "@types/jasmine": "^2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~9.4.0",
      "codelyzer": "^4.1.0",
      "jasmine-core": "~3.0.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~2.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.4.1",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "parcel-bundler": "^1.5.1",
      "parcel-plugin-angular": "0.5.1-next.13",
      "parcel-plugin-typescript": "^0.6.0",
      "postcss-modules": "^1.1.0",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.0",
      "tslint": "~5.9.1",
      "typescript": "~2.7.0"
    }
  }
  </code></pre>
  
  <p>could I have an example senario with a light and a dark theme? </p>