javascript - How to dynamically switch color themes using SASS? - Stack Overflow

admin管理员组

文章数量:1320781

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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 26, 2019 at 22:14 RumataRumata 1,04733 gold badges2121 silver badges5151 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptHow to dynamically switch color themes using SASSStack Overflow