![](/img/trans.png)
[英]Is there any easy way to switch themes dynamically with JQuery Mobile?
[英]How to dynamically switch color themes using SASS?
我正在尝试为一个项目实现可切换的主题,它是一个 Mendix 项目,但让我们假设它是一个网站。
问题:
我需要通过单击按钮更改网站的颜色主题。 所以基本上我需要所有元素在我单击按钮时从不同的变量集中获取颜色。
我在这里看到两个选项:
编译 2 个 css 文件并在它们之间切换:将所有 sass 文件链接到variables-1 ,编译 CSS 文件,然后将所有 sass 文件链接到variables-2 ,编译第二个 css 文件。 单击按钮即可在它们之间切换。
在此选项中,颜色不会动态分配,每次进行更改时,我都必须手动将每个 sass 文件链接到不同的变量,或更改变量值,然后重新编译所有内容。 此外,我将无法继续处理该项目并同时切换主题。
在 mixins 中预定义颜色主题,像本文一样为每个主题编译 css 类,并使用一些自定义 js 逻辑为元素分配相应的类。
很可能不会起作用,因为项目中的元素太多,并且为每个元素更改类太复杂了。
我怎么解决这个问题?
您不能在浏览器中动态更改 sass 变量。 这里有更详细的解释:
一个可能的解决方案是向代表主题的正文添加或删除一个类。 然后,例如,如果 body 具有类“dark-theme”,则背景颜色为黑色等等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.