title: Angular Material multiple themes
body: <p>I have a file with my theme setup</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  
  $app-primary: mat-palette($mat-cyan, 600);
  $app-accent: mat-palette($mat-indigo, 900);
  $app-warn: mat-palette($mat-red);
  
  $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
  
  @include angular-material-theme($app-theme);
  </code></pre>
  
  <p>And this works fine. However, now I need extra color in one component and I decided to make another theme for that specific component.</p>
  
  <pre><code>@import "~@angular/material/theming";
  
  $radio-app-primary: mat-palette($mat-cyan, 600);
  $radio-app-accent: mat-palette($mat-yellow, 900);
  $radio-app-warn: mat-palette($mat-deep-purple);
  
  $radio-app-theme: mat-light-theme($radio-app-primary, $radio-app-accent, $radio-app-warn);
  
  @include angular-material-theme($radio-app-theme);
  </code></pre>
  
  <p>But this doesn't seem to affect my radio group in any way.</p>
  
  <p>This is my component's html</p>
  
  <pre><code>&lt;mat-radio-group [formControl]="control"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-6" *ngFor="let option of radioOptions; let i = index"&gt;
                  &lt;mat-radio-button [value]="option.value" [color]="i == 1 ? 'accent' : null"&gt;
                      &lt;mat-form-field class="w-100"&gt;
                          &lt;input type="text" matInput [placeholder]="option.label" [readonly]="true"
                                 style="pointer-events: none" [value]="option.string"&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/mat-radio-button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/mat-radio-group&gt;
  </code></pre>
  
  <p>I tried to seek styles from my custom theme and I found something but that doesn't seem to apply to component's inner <code>mat</code> components. They still use global theme colors.</p>