使用 CSS 变量进行主题化

什么是CSS变量？

如何使用 CSS 变量轻松实现主题化？

【开发中】可自定义主题的 CSS 变量 #1377

过去给 Web 应用程序做主题非常麻烦，你必须使用 JavaScript 来完成更改元素视觉效果的繁重工作，或者根据当前主题为每个元素创建多个不同的版本。仅仅为了做主题就需要这么多繁琐的代码。

如今，借助CSS 变量，实现起来要容易得多，也简洁得多。

什么是CSS变量？

实际上，它们与你在其他语言中了解的任何其他变量非常相似。你可以在元素的 CSS 中定义它们，然后它们就可以在元素本身及其子节点的 CSS 中使用。
变量的定义方式如下：

selector {
  --my-variable: value;
}

该值可以是任何你想要的 CSS 值（甚至是另一个变量）。
使用变量非常简单，只需定义即可：

selector {
  color: var(--my-variable);
}

以下是一个实际示例：

如何使用 CSS 变量轻松实现主题化？

首先，我们需要了解主题需要哪些变量。为了简单起见，假设我们的主题只有两个变量：主色和辅助色。在实际应用中，变量可能会更多（例如阴影、字体等）。

其次，我们来定义每个主题的变量（我个人倾向于在html元素级别定义，但您可以随意选择）。我们将按类名区分主题。假设我们只有两个主题：默认主题和蓝色主题。

html {
  --my-primary: red;
  --my-secondary: blue;
}

html.blue {
  --my-primary: blue;
  --my-secondary: red;
}

让我们使用这些变量来设置元素的样式：

.child {
  color: var(--my-primary);
  background: var(--my-secondary);
}

现在，如果我们切换元素blue中的类，元素的视觉效果就会自动改变，无需任何额外操作。代码非常简洁直观，如果想要添加新类，也只需向元素添加另一个类即可。完整的示例代码如下：htmlchildhtml

主题布置正式开始！