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

Question

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

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

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

---

我看到两个选项：

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

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

2. 在 mixin 中预定义颜色主题，为每个主题编译 CSS 类，就像这篇文章中所述的那样， 并使用一些自定义 js 逻辑将相应的类分配给元素。

   最有可能不起作用，因为项目中有太多元素，并且更改每个元素的类会太复杂。

如何解决这个问题？

- Rumata

---

也许你可以巧妙地运用 CSS 自定义属性。 - Webber

让CSS被PHP或其他语言解析 - 在其中替换颜色，或为body创建第二个CSS类，并仅更改body class=''。 - Grzegorz Miśkiewicz

Answer 1

您无法在浏览器中动态更改Sass变量。以下是更详细的解释： 更改scss变量值 对于您来说，可能的解决方案是向body添加或删除表示主题的类。然后，例如，如果body具有“dark-theme”类，则背景颜色为黑色等。

- Nico Diz

---

如何使用Sass实现这一点？ - Bato-Bair Tsyrenov

我的答案的第一部分与该解释有链接。关于第二种可能性，您可以在此处查看实现：https://jsfiddle.net/sm7a2qv8/ - Nico Diz

我的意思更像是整个主题系统：https://github.com/batousik/angular-bootswatch-dynamic-seed。有没有简化这种事情的方法？而@Rumata，这是你考虑过的事情吗？ - Bato-Bair Tsyrenov

IE浏览器不支持此功能。 - harsha reddy