title: angular 5 material change custom component theme
body: <p>i am struggling with themes very hard. my requirement is to change the theme on the fly. for default component it seems to work fine. but for custom components i m failing to understand. Here is the implementation:</p>
  
  <p>i have a <strong>styles.scss</strong></p>
  
  <pre><code>@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  
  .widget-para-title {
      font-size: small;
      margin-top:10px;
      color:#4A90E2;
      font-weight:bold;
      margin-bottom:0px;
      padding: 5px;
      font-family: Roboto,"Helvetica Neue",sans-serif;
  }
  </code></pre>
  
  <p>** theme.scss**</p>
  
  <pre><code>@import '~@angular/material/theming';
  
  @include mat-core();
  
  $custom-primary: mat-palette($mat-blue-grey,500);
  $custom-accent:  mat-palette($mat-lime, 100);
  $custom-warn:    mat-palette($mat-red);
  $custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
  
  @include angular-material-theme($custom-theme);
  
  
  //Orange theme
  $ora-primary: mat-palette($mat-orange, 800);
  $ora-accent:  mat-palette($mat-grey, 200);
  $ora-warn:    mat-palette($mat-red);
  $ora-theme: mat-light-theme($ora-primary, $ora-accent);
  
  .orange-theme {
      @include angular-material-theme($ora-theme);
  }
  
  
  //green theme
  $green-primary: mat-palette($mat-green, 800);
  $green-accent:  mat-palette($mat-grey, 200);
  $green-warn:    mat-palette($mat-red);
  $green-theme: mat-light-theme($green-primary, $green-accent);
  
  .green-theme {
      @include angular-material-theme($green-theme);
  }
  </code></pre>
  
  <p>i am using the below to change theme on the fly
  <strong>app.component.ts</strong></p>
  
  <pre><code>setTheme(theme:string){
        //var theme='green-theme'
        this.overlayContainer.getContainerElement().classList.add(theme);
        this.componentCssClass = theme;
    }
  </code></pre>
  
  <p>The thing where i am stuck is that in the styles.css the color is currently hardcoded which should be same as the value of primary color of the current theme. so what change do i need to make in the above code to get it working?</p>