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

How to change and maintain multiple color themes at runtime with css?

本文关键字：维护 颜色 运行时 css      更新时间：2023-09-26

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

所以现在我有了：

红色主题.css
BlueTheme.css

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

选项1。我想知道是否有什么方法可以做这样的事情：

主题.css？Theme=Red，然后在css中让它根据该变量确定使用哪一个。

选项2。我还想知道我是否可以在CSS内部做一些事情：

背景颜色：@themeBackgroundColor

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

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

如果你想在CSS中使用变量，可以看看Less或Sass，它们都有客户端解决方案。

要切换样式，可以：

  • 为主体使用一个ID属性，比如<body id="red">，并在css前面加上这个ID。所以#red myelement.myclass{}之类的。然后使用javascript切换ID
  • 你可以在服务器端有一个基本的CSS文件和几个主题CSS文件（比如gmail），并通过更改URL在它们之间交换，这将在浏览器中生成一个新的请求来获取其他CSS
  • 您可以寻找或编写一些自己的小框架，将适当的样式作为样式属性添加到html内部（如这里所做的），或者将内联样式元素添加到html中，在那里您可以定义自定义样式并用javascript交换它们

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

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

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

假设您有两个样式表

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

最简单的方法是使用LESS。一种更复杂的方法是让php或asp.net（取决于您的平台）处理您的css文件，并使用代码输出css（确保为css文件输出正确的标头），但如果您计划多次这样做，这种方法可能更有用。

相关文章：