title: Get Angular Material theme color scheme/palette for other elements
body: <p>I am building an application but I want to keep a consistent color scheme that can be changed with settings so I'm using Angular-Material, but I am not sure how to get the color scheme on elements that don't directly offer the ability to color them with <code>color=&quot;primary&quot;</code> so I'm left with trying to figure out how to obtain the color/color scheme that my Material theme uses.
  I want it to change when the theme changes, for instance, my navbar will adapt to the theme change because its set to</p>
  <pre><code>&lt;mat-toolbar color=&quot;primary&quot; class=&quot;fixed-navbar mat-elevation-z10&quot;&gt;
  </code></pre>
  <p>But a grid element from Material doesn't take the same argument so I'm left to attempt to style it in a close enough color or simply not match it at all (and it won't adjust to theme changes) as seen here:</p>
  <p><a href="https://i.stack.imgur.com/NFPaZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFPaZ.png" alt="enter image description here" /></a></p>
  <p>I want it to match the color with the theme mat, which is here (and gets changed on options selected in navbar settings)</p>
  <pre><code>@import '~@angular/material/theming';
  
  @include mat-core();   
      
  $candy-app-primary: mat-palette($mat-red);
  $candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
  $candy-app-warn:    mat-palette($mat-red);
  $candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  
  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  .default {
    @include angular-material-theme($candy-app-theme);
  }
  .light {
    $light-primary: mat-palette($mat-blue, 200,300, 900);
    $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
    $light-warn:    mat-palette($mat-red, 600);
    $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
    @include angular-material-theme($light-theme);
  }
  @include angular-material-theme($candy-app-theme);
  </code></pre>