如何使用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 类，并使用一些自定义 js 逻辑为元素分配相应的类。

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

我怎么解决这个问题？

Answer 1

您无法在浏览器中动态更改 sass 变量。这是更详细的解释：

更改变量值 scss

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