title: sass multiple themes in angular
body: <p>Let's say I have two themes (light &amp; dark) in an angular app > 2, and a toggle button which is already configured to add the theme class to the <strong>body</strong> tag</p>
  
  <p>variables.scss</p>
  
  <pre><code>$themes: (
    light: (
      backgroundColor: #fff,
      textColor: #408bbd,
      borderColor: #254fe5,
    ),
    dark: (
      backgroundColor: #222,
      textColor: #ddd,
      borderColor: #2e4dd2,
    ),
  );
  </code></pre>
  
  <p>I tried different approaches I found (<a href="https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1#.9n1bdu7h7" rel="nofollow noreferrer">here</a> and <a href="https://zellwk.com/blog/organizing-multiple-theme-styles-with-sass/" rel="nofollow noreferrer">here</a>), but none worked.</p>
  
  <p>I also tried the simplest approach</p>
  
  <p>about.component.scss</p>
  
  <pre><code>.theme-dark .page-title{
    color: white;
  }
  
  .theme-light .page-title{
    color: red;
  }
  </code></pre>
  
  <p>I know the class <code>.theme-dark</code> on body tag is not recognized from a component style, but I can't find any solution.</p>
  
  <p>What approach can I use to get multiple themes in such modules system?</p>