title: How to use colors of the prebuilt angular-material themes?
body: <p>In my angular app that I'm building for a demo, I've some kind of toolbar that I need to distinguish a bit from the background. I was willing to use a shade of the prebuilt-theme I'm using(purple-green).
  My understanding is that google's material guide describe shades of the primary color: <a href="https://material.io/resources/color/#!/?view.left=0&amp;view.right=0" rel="nofollow noreferrer">https://material.io/resources/color/#!/?view.left=0&amp;view.right=0</a> that would be ideal for my case</p>
  <p>I'm strugling to find how to do such a simple thing. In ionic, you could use <code>color=&quot;primary&quot;</code>, but here,
  I'm using one of the prebuilt theme in my styles.scss:</p>
  <pre><code>@import '@angular/material/prebuilt-themes/purple-green.css';
  </code></pre>
  <p>I tried several things</p>
  <pre><code>@import '~@angular/material/theming';
  .chat-header {
    color: mat-color($primary);
  }
  </code></pre>
  <p>My understading is that since this prebuilt theme is just pure CSS, it doesn't have a SCSS variable. But how am I supposed to use their colors in one of my component then?</p>
  <p>Is there some predefined CSS classes that I could use? I've searched but didn't found any?</p>