如何使用SASS动态切换颜色主题？

Question

我正在尝试为一个项目实现可切换的主题，这是一个Mendix项目，但让我们假设它是一个网站。

• 有许多不同的页面，并且每个页面上都有不同的元素。
• 所有样式均使用SASS编写。页面和元素使用来自一个单独的SASS文件的值和变量- variables-1 。
• 第二个SASS文件具有相同的变量，但值不同- variables-2 。

问题：
我需要在单击按钮时更改网站的颜色主题。因此，基本上，我需要所有元素才能在单击按钮时从不同的变量集中获取颜色。

---

我在这里看到两个选项：

1. 编译2个css文件并在它们之间切换：将所有sass文件链接到 variables-1 ，编译CSS文件，然后将所有sass文件链接到 variables-2 ，编译第二个CSS文件。单击按钮即可在它们之间切换。

在此选项中，颜色不会动态分配，并且每次进行更改时，我都必须手动将每个sass文件链接到不同的变量，或者更改变量值，然后重新编译所有内容。另外，我将无法继续从事该项目并同时切换主题。

1. 预定义mixins中的颜色主题，像this article中那样为每个主题编译css类，并使用一些自定义js逻辑将相应的类分配给元素。

由于项目中的元素太多，因此很可能无法正常工作，并且太复杂而无法为每个元素更改类。

---

这个问题有解决方案吗？
我将非常感谢您的建议！ 预先谢谢你！

Answer 1

您不能在浏览器中动态更改sass变量。这是更详细的说明：

Changing variables values scss

您可能的解决方案是在代表主题的正文中添加或删除类。然后，例如，如果body的类别为“深色主题”，则背景色为黑色，依此类推。