6

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

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

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


我在这里看到两个选项:

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

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

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

    很可能不会工作,因为项目中有太多元素,并且太复杂而无法为每个元素更改类。

我怎么解决这个问题?

4

1 回答 1

1

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

更改变量值 scss

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

于 2019-05-25T14:24:32.330 回答