最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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?

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Mar 26, 2019 at 22:14 RumataRumata 1,0473 gold badges21 silver badges51 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

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.

发布评论

评论列表(0)

  1. 暂无评论