Currently, I am exploring the implementation of switchable themes for a project, which in this case is similar to a Mendix project but suppose it's a regular website.
- The website comprises various pages with different elements on each page.
- All styles are coded in SASS. These pages and elements utilize values from a separate SASS file named variables-1.
- There is also another SASS file available with the same variables but with distinct values - variables-2.
Issue:
My objective is to enable the color theme of the website to change upon clicking a button. Essentially, I want all the components to derive colors from a different set of variables once a button is clicked.
I have considered two possible courses of action:
Compile 2 css files and alternate between them: link all sass files to variables-1, compile the CSS file, then link all sass files to variables-2, and compile the second css file. Switching between them is triggered by a button click.
In this scenario, colors will not be dynamically assigned, and every time I need to make adjustments, I must manually link each sass file to varied variables or modify variable values before recompiling everything. Furthermore, I won't be able to seamlessly work on the project while switching between themes.
Establish predefined color themes using mixins, produce css classes for each theme as outlined in this article, and apply custom JavaScript logic to assign appropriate classes to the elements.
This approach most likely may not be practical due to the extensive number of elements in the project, making it overly complex to alter classes for each one.
Any suggestions on how to effectively tackle this challenge?