title: How to change font color of primary palette in Angular Material2?
body: <p>In the official <a href="https://github.com/angular/material2/blob/master/guides/theming.md" rel="noreferrer">theming documentation of Angular Material2</a> it states clearly the following:</p>
  
  <blockquote>
    <p>In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:</p>
    
    <ul>
    <li>A primary palette: colors most widely used across all screens and components.</li>
    <li>An accent palette: colors used for the floating action button and interactive elements.</li>
    <li>A warn palette: colors used to convey error state.</li>
    <li><strong>A foreground palette: colors for text and icons.</strong></li>
    <li>A background palette: colors used for element backgrounds.</li>
    </ul>
  </blockquote>
  
  <p>But in every example they modify only the first three:</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  
  $candy-app-primary: mat-palette($mat-indigo);
  $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  $candy-app-warn:    mat-palette($mat-red);
  $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  
  @include angular-material-theme($candy-app-theme);
  </code></pre>
  
  <p>So my question is: How can I change the foreground palette in order to change the color of the text for the primary or the secondary palette?</p>
  
  <p>There are some websites (<a href="https://www.materialpalette.com" rel="noreferrer">materialpalette.com</a>, <a href="https://material.io/color/#!/?view.left=0&amp;view.right=0" rel="noreferrer">material.io</a>) which show the color palette for easy visualization but still they don't say how to include or modify that palette in Angular Material2.</p>