title: Changing variables values scss
body: <p>I have defined different variables in my scss file, I used these variables in some scss files. </p>
  
  <p>_variables.scss</p>
  
  <pre><code>$light-theme: rgba(94,161,215,0.3);
  $dark-theme: #5EA1D7;
  $darker-theme: #57647A;
  $very-dark-theme: #455061;
  </code></pre>
  
  <p>How can I define 3 groups of themes? Something like:</p>
  
  <pre><code>default-theme {
      $light-theme: rgba(94,161,215,0.3);
      $dark-theme: #5EA1D7;
      $darker-theme: #57647A;
      $very-dark-theme: #455061;
  }
  
  dark-theme {
      $light-theme: black;
      $dark-theme: brown;
      $darker-theme: black;
      $very-dark-theme: black;
  }
  
  light-theme {
      $light-theme: black;
      $dark-theme: brown;
      $darker-theme: black;
      $very-dark-theme: black;
  }
  </code></pre>
  
  <p>I would like to change the values according to selected theme.
  For example I have 3 buttons, selecting on them, will change the variable colors.</p>
  
  <p>app.component.html</p>
  
  <pre><code> &lt;button mat-raised-button (click)="onSetTheme('default-theme')"&gt;Default&lt;/button&gt;
    &lt;button mat-raised-button (click)="onSetTheme('dark-theme')"&gt;Dark&lt;/button&gt;
    &lt;button mat-raised-button (click)="onSetTheme('light-theme')"&gt;Light&lt;/button&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>  onSetTheme(theme) {
      //TODO here I want to change the theme
    }
  </code></pre>
  
  <p>How can I change the theme inside onSetTheme() function.</p>
  
  <p>Thanks!</p>