title: How to dynamically switch color themes using SASS?
body: <p>I'm trying to implement switchable themes for a project, it's a Mendix project, but let's suppose it's a website.</p>
  <ul>
  <li>There are many different pages, and different elements on each page.</li>
  <li>All styles for them are written in SASS. The pages and elements use values from one separate SASS file with variables - <strong>variables-1</strong>.</li>
  <li>I have a second SASS file with the same variables but different values - <strong>variables-2</strong>.</li>
  </ul>
  <p><strong>Problem:</strong><br />
  I need to change the color theme of the website on a button click. So basically I need all the elements to take colors from the different set of variables when I click a button.</p>
  <hr />
  <p>I see two options here:</p>
  <ol>
  <li><p>Compile 2 css files and switch between them: link all sass files to <strong>variables-1</strong>, compile CSS file, then link all sass files to <strong>variables-2</strong>, compile second css file. Switch between them on a button click.</p>
  <p>In this option, colors won't be assigned dynamically, and every time when I make changes I will have to manually link each sass file to different variables, or change variables values, and recompile everything. Also I won't be able to continue working on the project and switch themes at the same time.</p>
  </li>
  <li><p>Predefine color themes in mixins, compile css classes for each theme like in <a href="https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1" rel="nofollow noreferrer">this article</a>, and use some custom js logic to assign corresponding classes to the elements.</p>
  <p>Most likely won't work, since there are too many elements in the project, and would be too complicated to change class for each one.</p>
  </li>
  </ol>
  <p>How can I solve this problem?</p>