我正在尝试为一个项目实现可切换的主题,这是一个Mendix项目,但假设它是一个网站。
我需要在按钮点击时更改网站的颜色主题。因此,当我点击按钮时,基本上我需要所有元素都从不同的变量集合中取出颜色。
我看到两个选项:
- 有许多不同的页面,每个页面上都有不同的元素。
- 它们的所有样式都是用SASS编写的。页面和元素使用一个单独的SASS文件中的变量值 - variables-1。
- 我有第二个SASS文件,其中包含相同的变量但不同的值 - variables-2。
我需要在按钮点击时更改网站的颜色主题。因此,当我点击按钮时,基本上我需要所有元素都从不同的变量集合中取出颜色。
我看到两个选项:
- 编译 2 个 CSS 文件并在它们之间进行切换:将所有 sass 文件链接到 variables-1,编译 CSS 文件,然后将所有 sass 文件链接到 variables-2,编译第二个 CSS 文件。在按钮点击时在它们之间切换。
在此选项中,颜色不会动态分配,并且每次进行更改时,我都必须手动将每个 sass 文件链接到不同的变量,或更改变量值并重新编译所有内容。另外,我将无法同时继续在项目上工作并切换主题。
- 在 mixin 中预定义颜色主题,为每个主题编译 CSS 类,就像这篇文章中所述的那样,
并使用一些自定义 js 逻辑将相应的类分配给元素。
最有可能不起作用,因为项目中有太多元素,并且更改每个元素的类会太复杂。