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

Question

我试图为一个项目实现可切换的主题，这是一个孟迪克斯项目，但让我们假设它是一个网站。

• 每个页面上有许多不同的页面和不同的元素。
• 他们的所有风格都是用SASS写的。页面和元素使用一个带有变量的SASS文件的值-变量-1。
• 我有第二个SASS文件，具有相同的变量，但值不同-变量-2。

问题：

我需要改变的颜色主题的网站上的按钮点击。所以基本上，当我点击一个按钮时，我需要所有的元素从不同的变量集合中获取颜色。

我在这里看到两种选择：

1. 编译2个css文件并在它们之间切换:将所有sass文件链接到variables-1，编译CSS文件，然后将所有sass文件链接到variables-2，编译第二个css文件。按一下按钮，在它们之间切换。 在这个选项中，颜色不会被动态分配，每次我进行更改时，我都必须手动将每个sass文件链接到不同的变量，或者更改变量值，然后重新编译所有的内容。此外，我将无法继续工作的项目和切换主题在同一时间。
2. 在mixins中预定义颜色主题，为每个主题编译css类，比如在这篇文章中，并使用一些定制的js逻辑为元素分配相应的类。 很可能无法工作，因为项目中有太多的元素，而且太复杂了，无法为每个元素更改类。

我该如何解决这个问题？

Answer 1

不能动态更改浏览器中的sass变量。下面是一个更详细的解释：

变变量值scss

对您来说，一个可能的解决方案是向表示主题的主体添加或移除类。然后，例如，如果身体有类“暗主题”，背景颜色是黑色等。