Question

我正在为我的网络应用构建主题，用户可以在其中选择主题并且各种元素会（实时）更改颜色以匹配该主题。例如，这是主题选择器：

<div id="theme-selector">
  <div id="theme-green" class="theme"></div>
  <div id="theme-blue" class="theme"></div>
</div>

当用户选择颜色时，将一个类添加到正文：

$(document).on('click', '.theme', function(e) {
  var color;
  color = this.id;
  $('body').removeClass();
  $('body').addClass(color);
});

CSS是令人厌倦的地方，因为你必须为每种颜色重复很多选择器：

/* Green theme */
body.theme-green header, body.theme-green .button-primary {
  background-color: #4caf50;
}
body.theme-green .button-primary:hover {
  background-color: #5cb860;
}
body.theme-green a {
  color: #4caf50;
}

/* Blue theme */
body.theme-blue header, body.theme-blue .button-primary {
  background-color: #2196f3;
}
body.theme-blue .button-primary:hover {
  background-color: #39a1f4;
}
body.theme-blue a {
  color: #2196f3;
}

在像LESS或Stylus这样的预编译器中使用变量有助于整理一些东西，但它并不能解决重复大量代码的核心问题。

是否有更好的编程技术用于动态主题化？

Answer 1

在处理颜色选择的同时，更容易在javascript中进行颜色更改。为颜色使用一组css类，例如textcol和linkcol，并使用javascript应用它们。您只需为此添加2行css，并且不需要jquery或更少的依赖。

a, .linkcol {text-decoration:none;}
.big { font-size:1.2em;}

<!DOCTYPE html>
<html>
<body>
<h1>Hello world</h1>
<p>Click the button to change the theme.</p>

<button onclick="colFunction('#808000','#000000')">Green</button>
<button onclick="colFunction('#800000','#666666')">Red</button>

<p id="demo">This <a class="linkcol" href="#">link</a> and <span class="big linkcol">these big words</span> which use multiple classes should be black except for red theme, which makes them gray</p>

<script>
function colFunction(textcol, linkcol) {
    document.getElementsByTagName("body")[0].style.color = textcol;
for (i=0;i <= document.getElementsByClassName("linkcol").length;i++)  {
    document.getElementsByClassName("linkcol")[i].style.color = linkcol;
    } 
}
</script>

</body>
</html>

<强>解释

如果您希望可以编辑HTML以将其包含为单个元素的额外类，如下面的<span class="big textcol">示例所示。将主要颜色应用于<body>标记意味着正文中的所有内容都将继承颜色，但具有不同默认颜色的颜色除外（<a>是唯一想到的颜色）。

用户定义的颜色

因为使用了javascript参数（参数），你可以为用户创建一个文本框或下拉框，选择他们自己的颜色，而不是用你自己的按钮定义的颜色，只是用变量调用javascript函数而不是字面十六进制数字。

在CSS中实现动态主题的好方法是什么？

1 个答案: