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

Question

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

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

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

---

我在这里看到两个选项：

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

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

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

   很可能不起作用，因为项目中的元素太多，并且太复杂而无法为每个元素更改类。

我该如何解决这个问题？

Answer 1

您不能在浏览器中动态更改 sass 变量。这里有更详细的解释：

Changing variables values scss

一个可能的解决方案是向代表主题的主体添加或删除一个类。然后，例如，如果 body 具有“dark-theme”类，则背景颜色为黑色等等。