title: Angular Material colors don't change using custom themes
body: <p>I want to change the colors for "<strong>warn</strong>", "<strong>accent</strong>", and "<strong>primary</strong>". However, I can only change the "<strong>primary</strong>" with my code, while "<strong>warn</strong>" and "<strong>accent</strong>" don't change.</p>
  
  <p>My <strong>theme.scss</strong>:</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  
  $my-app-primary: mat-palette($mat-green);
  $my-app-accent: mat-palette($mat-grey);
  $my-app-warn: mat-palette($mat-cyan);
  
  $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
  
  .alt-theme {
    @include angular-material-theme($my-app-theme);
  }
  </code></pre>
  
  <p>My <strong>progress-bar-determinate-example.html</strong>:</p>
  
  <pre><code>&lt;mat-progress-bar class="alt-theme" mode="determinate" value="40" color="primary"&gt;&lt;/mat-progress-bar&gt;
  </code></pre>
  
  <p>My <strong>angular-cli.json</strong>:</p>
  
  <pre><code>{
    "apps": [{
      "styles": [
        "styles.css",
        "theme.scss"
        ]
    }]
  }
  </code></pre>
  
  <p>If I set color="primary", it turns to green as intended in theme.scss, but if I change it to "warn" or "accent" it will not turn to cyan and grey in my case. It will remain Red and Yellow as default for Material.</p>
  
  <p>My scope is to change the progress bar colors in a certain component, not site wide.</p>
  
  <p>Can you help me figure out what am I doing wrong?</p>
  
  <p>A live demo of this code <a href="https://stackblitz.com/edit/angular-kj7wbw" rel="nofollow noreferrer">is here</a>.</p>