title: Having multiple themes with custom colors for Angular Material and custom components
body: <p>I'd like to have a few themes in my app, but along with Angular Material themes I also want to define custom colors that are used by specific components and elements that aren't part of Angular Material. Whenever I change a theme those custom colors should be changed as well. 
  Let's say I have a file that defines colors for each theme, then I'd like to import it in an arbitrary scss file and utilize the colors to style some elements</p>
  
  <pre><code>@import "custom-colors"
  
  .my-elem {
   color: $textColor;
  }
  </code></pre>
  
  <p>Then, if I need to change a theme I would apply a specific class to the outer most container of the app, and after this I'd like <code>$textColor</code> to have another value, so that <code>color</code> of the <code>.my-elem</code> would change.</p>
  
  <p>Is there any way of doing this without writing something like </p>
  
  <pre><code>.another-theme {
   .my-elem {
     color: $textColorOfAnotherTheme;
   }
  }
  </code></pre>
  
  <p>In every component that should be affected by theme changing?</p>