Javascript 如何使用css在运行时更改和维护多个颜色主题？

我希望我的web应用程序具有不同颜色的主题：

所以现在我有：

RedTheme.css
BlueTheme.css

我在运行时动态加载每一个。取决于用户在选项菜单中选择的内容。 这是可行的，但我不喜欢每个主题都有一个单独的文件

备选案文1。我想知道是否有什么方法可以做到：

Theme.css？Theme=Red，然后在css中根据该变量确定要使用哪一个

备选案文2。我还想知道我是否可以在CSS中做一些类似的事情：

背景色：@themeBackgroundColor

然后在运行时通过javascript或其他方式设置这个变量

---

---

如果选项1和选项2不可用，除了为每个主题保留不同的文件外，您还有其他主题化建议吗？b/c也许我想要一个选项，用户可以在将来选择自定义颜色。

如果您想在CSS中使用变量，请查看，或者两者都有客户端解决方案

要切换样式，您可以：

• 对主体使用ID属性，比如
  ，并在css前面加上这个ID。所以

  #red myelement.myclass{}

  或其他什么。然后用javascripts切换ID
• 您可以在服务器端拥有一个基本CSS文件和几个主题CSS文件（例如gmail），并通过更改URL在它们之间使用javascript进行交换，这将在浏览器中生成一个新请求以获取其他CSS
• 您可以寻找或编写一些自己的小框架，将适当的样式作为样式属性（）添加到html本身中，或者将内联添加到html中，在其中定义自定义样式并用javascript替换它们

就我所见，javascript对元素或HTML的CSS的任何更改都将触发浏览器再次呈现页面

---

直接更改客户端硬盘上的CSS文件是不可能的，因为javascript不允许这样做。但是，您可以更改缓存或html中的CSS。

最简单的方法是使用。一种更复杂的方法，但如果你打算经常这样做，可能会更有用，那就是让你的css文件由php或asp.net（取决于你的平台）处理，并使用代码输出css（确保为css文件输出正确的标题）。

Benjamin的建议是我的建议之一。另一个鲜为人知的技巧是，您可以在样式表上设置一个disabled属性，这将禁用该样式表

假设您有两个样式表

<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");
      }      
    }
}

函数集主题（主题）{
var主题=[“蓝色主题”、“红色主题”]；
对于（var i=0；i

btw Less/sas是编译时的。。。我正在寻找一个运行时解决方案，它可以通过

less.js在浏览器中运行，如果你这样做，你的网站在切换主题时会在Chrome中闪烁。这里显示了这种切换的正确方法：（不要忘记将'title'属性添加到'link'元素。没有它，这个技巧在Chrome中就不起作用。）@StanislavBerkov您提供的链接实际上使用了中的相同技术，因为基于
的方法并没有得到很好的支持。从您提供的链接：
下一章，关于使用JavaScript动态更改样式表，将提供一种处理这些缺点的方法。
我来自未来。使用css变量