如何使用css在运行时更改和维护多个颜色主题？
[英]How to change and maintain multiple color themes at runtime with css?
问题描述
我希望我的网络应用程序有不同的彩色主题：
所以现在我有：
RedTheme.css
BlueTheme.css
我在运行时动态加载每个。 取决于用户在其选项菜单中选择的内容。 这是有效的，但我不喜欢为每个主题都有一个单独的文件。
选项1.我想知道是否有任何办法可以做到：
Theme.css？Theme = Red然后在css中让它根据该变量确定使用哪一个。
选项2.我也想知道是否可以在CSS内部做一些事情：
background-color：@themeBackgroundColor
然后以某种方式通过javascript或其他东西在运行时设置此变量。
如果选项1和选项2不可用，除了为每个主题保留不同的文件外，您还有其他任何建议吗？ b / c也许我想要一个选项，用户可以在将来选择自定义颜色。
3 个解决方案
解决方案1
9 已采纳 2012-03-30 16:11:03
如果你想在你的CSS中使用变量，看看Less或Sass ，它们都有这方面的客户端解决方案。
要切换样式，您可以：
- 使用身体的ID属性，如
<body id="red">并使css前缀此ID。 所以#red myelement.myclass{}或其他什么。 然后使用javascripts切换ID。 - 您可以在服务器端拥有一个基本CSS文件和几个主题CSS文件（例如gmail），并通过更改URL在javascript之间进行交换，这将在浏览器中生成一个新请求以获取其他CSS。
- 您可以查找或编写自己的一些小框架，在html本身中添加适当的样式作为样式属性（ 如此处所做 ），或者在html中添加内联样式元素 ，您可以在其中定义自定义样式并将其交换出来用javascript。
据我所见，javascript对CSS元素或HTML的任何更改都会触发浏览器再次呈现页面。
由于javascript不允许，因此无法直接更改客户端硬盘上的CSS文件。 但是，您可以更改缓存或html中的CSS。
解决方案2
3 2012-03-30 16:19:47
本杰明的建议是我的一个建议。 另一个鲜为人知的技巧是你可以在样式表上设置一个禁用属性，这将禁用该样式表
假设您有两个样式表
<link rel="stylesheet" type="text/css" href="blue-theme.css" id="blue-theme"/>
<link rel="stylesheet" type="text/css" href="red-theme.css" id="red-theme"/>
您可以轻松启用其中一个
function setTheme(theme) {
var themes = ["blue-theme", "red-theme"];
for (var i=0; i < themes.length; i++) {
var styleSheet = document.getElementById(themes[i]);
if (themes[i] == theme) {
styleSheet.removeAttribute("disabled");
} else {
styleSheet.setAttribute("disabled", "disabled");
}
}
}
解决方案3
0 2012-03-30 16:13:11
最简单的方法是使用LESS 。 一个更复杂的方法，但如果你计划这么做可能会更有用，那就是让你的css文件由php或asp.net处理（取决于你的平台）并使用代码输出css（确保输出CSS文件的正确标题）。
React - localstorage 如何添加多种颜色主题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.