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

Posted 2023-03-06

【中文标题】如何使用 SASS 动态切换颜色主题？

【英文标题】：How to dynamically switch color themes using SASS?

【发布时间】：2019-08-17 09:57:38

【问题描述】：

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

有许多不同的页面，每个页面上都有不同的元素。 它们的所有样式都是用 SASS 编写的。页面和元素使用来自一个单独的 SASS 文件的值和变量 -

variables-1

。 我有第二个 SASS 文件，其变量相同但值不同 -

variables-2

。

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

---

我在这里看到两个选项：

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

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

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

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

我该如何解决这个问题？

【问题讨论】：

也许你可以用CSS custom properties做一些聪明的事情

用 php 或其他语言解析 css - 你替换颜色，或为 body 创建第二个 css 类，只更改 body class=''

【参考方案1】：

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

Changing variables values scss

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

【讨论】：

如何使用 sass 实现这一点？

我的答案的第一部分有一个与该解释的链接。关于第二种可能性，你可以在这里看到一个实现：jsfiddle.net/sm7a2qv8

我的意思更像是整个主题系统：github.com/batousik/angular-bootswatch-dynamic-seed。有没有办法让这种事情变得更简单？ @Rumata 是你的想法吗？

IE浏览器不支持这个