title: How can I handle multiple themes in an angular component?
body: <p>I'm working on an Angular 9 project where I'm creating two themes and each theme has it's own css output file. 
  I modified the <code>angular.json</code> file to handle that:</p>
  
  <pre><code>"styles": [
    {
      "input": "src/styles/themes/light-theme.scss",
      "lazy": true,
      "bundleName": "light-theme"
    },
    {
      "input": "src/styles/themes/dark-theme.scss",
      "lazy": false,
      "bundleName": "dark-theme"
    }
  ],
  </code></pre>
  
  <p><code>light-theme</code> and <code>dark-theme</code> are my input files, where I'm setting variables like: </p>
  
  <ul>
  <li>$background-color</li>
  <li>$button-color</li>
  <li>$text-color</li>
  <li>etc, etc.</li>
  </ul>
  
  <p>My problem is that I cannot use those variables from each component, because my component won't know what those variables are. I cannot import one or another theme, because I would like to use the values that I declared in the input file. 
  How should I handle this? Is there any way of "importing" the input file I wrote on my angular.json file?</p>
  
  <p>Thanks!</p>