I'm trying to implement switchable themes for a project, it's a Mendix project, but let's suppose it's a website.

• There are many different pages, and different elements on each page.
• All styles for them are written in SASS. The pages and elements use values from one separate SASS file with variables - variables-1.
• I have a second SASS file with the same variables but different values - variables-2.

Problem:
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.

I see two options here:

1. Compile 2 css files and switch between them: link all sass files to variables-1, pile CSS file, then link all sass files to variables-2, pile second css file. Switch between them on a button click.

   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 repile everything. Also I won't be able to continue working on the project and switch themes at the same time.

2. Predefine color themes in mixins, pile css classes for each theme like in this article, and use some custom js logic to assign corresponding classes to the elements.

   Most likely won't work, since there are too many elements in the project, and would be too plicated to change class for each one.

How can I solve this problem?

I'm trying to implement switchable themes for a project, it's a Mendix project, but let's suppose it's a website.

• There are many different pages, and different elements on each page.
• All styles for them are written in SASS. The pages and elements use values from one separate SASS file with variables - variables-1.
• I have a second SASS file with the same variables but different values - variables-2.

Problem:
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.

I see two options here:

1. Compile 2 css files and switch between them: link all sass files to variables-1, pile CSS file, then link all sass files to variables-2, pile second css file. Switch between them on a button click.

   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 repile everything. Also I won't be able to continue working on the project and switch themes at the same time.

2. Predefine color themes in mixins, pile css classes for each theme like in this article, and use some custom js logic to assign corresponding classes to the elements.

   Most likely won't work, since there are too many elements in the project, and would be too plicated to change class for each one.

How can I solve this problem?

• javascript
• html
• css
• sass
• mendix

• Perhaps you could do something smart with CSS custom properties – Webber Commented Mar 26, 2019 at 22:23
• make css parsed by php or other language - where u replace colors, or make second css class for body, and only change body class='' – Grzegorz Miśkiewicz Commented Mar 26, 2019 at 23:48

1 Answer 1

You can't dynamically change sass variables in the browser. Here is a more detailed explanation:

Changing variables values scss

A possible solution for you is to add or remove a class to the body that represents the theme. Then, for example, if body has class "dark-theme", background color is black and so on.