title: Angular Material 2 mat-palette() using lighter and darker option
body: <p>Based on the <a href="https://material.angular.io/guide/theming" rel="nofollow noreferrer">theming guide</a> you can define a custom theme <code>accent</code> for our example. The second parameter will override the <code>$mat-pink</code> default to A200, but how does the 3rd (<code>$lighter</code>) and 4th (<code>$darker</code>) parameter works?</p>
  
  <p><code>$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);</code></p>
  
  <blockquote>
    <p>From <code>@angular/material/_theming.scss</code></p>
  
  <pre><code>@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
     .....
  }
  </code></pre>
  </blockquote>