使用 CSS 变量实现 UI 主题
我们将建造什么？
HTML 设置
变量设置
使用变量
JavaScript 设置
延伸阅读
最初发表于我的博客
本文将介绍如何使用 CSS 变量来切换 Web 应用程序或网站的主题。本文假设您已阅读过我之前的文章《CSS 变量速查表》，或者对该功能有一定的了解。
我们将建造什么？
以下是本文代码的最终运行结果。为了实现这一目标，我们将使用一些基本的 HTML、CSS 和 JavaScript 操作。
如您所见，左侧提供了主题的可配置选项。我认为，更改背景颜色、颜色和字体足以让您了解并掌握如何为我们的网站或应用程序切换主题。
这个过程很简单。首先，我们将构建 HTML 布局，使用默认主题变量为其应用 CSS，并添加几个事件处理程序来动态更新主题。
请注意，JS 代码是用新一代 JavaScript 编写的，因此请确保您使用的是支持该技术的最新浏览器。
HTML 设置
默认主题切换器
左上角的圆圈用于切换各自预设的主题。我们将预设三个主题，并允许通过颜色输入框进行动态着色，这将在本文后面部分介绍。默认配色方案分别为绿色（Vue）、蓝色（Facebook）和蓝色（Twitter）。例如，要创建按钮，我们可以使用三个span元素。
请注意，您可以使用 `<a>`
button或 `input<span>` 元素，这无关紧要。我使用 `<span>` 元素并没有什么特别的原因，这只是一个例子。
好了，我们回到标记语言。它看起来像这样：
<span class="btn vue-green" data-bg-color="#42b883" data-color="#35495e"> </span>
<span class="btn fb-blue" data-bg-color="#3b5998" data-color="#8b9dc3"> </span>
<span class="btn tw-blue" data-bg-color="#0084b4" data-color="#00aced"> </span>
由于我们使用了一个span元素，因此需要将预定义的颜色存储在某个地方。实现方法是使用data属性。这些属性的值将用于我们的主题，我们将在本文后面部分看到。
提示：为了保持代码简洁，您也可以在页面加载时通过 JavaScript 设置这些值。例如，可以将这些值定义为 CSS 变量，并在页面初始加载时读取这些变量并相应地设置每个 span 元素的 data 属性。
字体切换器
字体切换器将是一个简单的select元素，option其中包含三个子元素。每个子元素option都将包含一个value用于font-size更新的属性：
<select>
<option value="12">12px</option>
<option value="15" selected>15px</option>
<option value="25">25px</option>
</select>
动态着色
对于用户自定义主题颜色，我们将利用input类型为 的元素color。这非常方便，使我们能够在网页上拥有一个功能齐全的颜色选择器。
<label for="bg-color">Background:</label>
<input type="color" id="bg-color">
<label for="color">Color:</label>
<input type="color" id="color">
左侧部分现在看起来是这样的：
<aside>
<h1>Theme Switcher</h1>
<h3>Defaults</h3>
<span class="btn vue-green" data-bg-color="#42b883" data-color="#35495e"> </span>
<span class="btn fb-blue" data-bg-color="#3b5998" data-color="#8b9dc3"> </span>
<span class="btn tw-blue" data-bg-color="#0084b4" data-color="#00aced"> </span>
<h3>Font Size</h3>
<select>
<option value="12px">12px</option>
<option value="15px" selected>15px</option>
<option value="25px">25px</option>
</select>
<h3>Dynamic Color</h3>
<label for="bg-color">Background:</label>
<input type="color" id="bg-color">
<label for="color">Color:</label>
<input type="color" id="color">
</aside>
变量设置
HTML 可配置部分已经完成，现在我们需要设置 CSS 变量及其默认值。我们将在:root伪类中完成此操作：
:root {
--primary-color: #42b883;
--primary-bg-color: #35495e;
--primary-font-size: 15px;
--color-white: #fff;
}
这样，我们就可以在需要指定颜色或字体的地方重复使用该变量。例如，默认主题将是绿色。
使用变量
假设我们要更改元素background-color上的body、元素color上的main以及font-size每个p元素上的。
我们的CSS代码应该如下所示：
body {
/* removed for brevity */
background-color: var(--primary-bg-color);
}
main {
/* removed for brevity */
color: var(--primary-color);
}
p {
font-size: var(--primary-font-size);
}
通过var函数将 CSS 变量赋值给一个元素。CSS 属性的值从该 CSS 变量中获取并解析。这样做非常巧妙，因为每当我们更改该变量时，这些属性的值都会更新。
JavaScript 设置
好了，现在我们准备介绍 JavaScript 部分。没有它，主题切换就无法实现。我们需要一种方法来更改 CSS 变量的值，这可以通过一小段 JavaScript 代码来实现。只需几个简单的步骤即可完成：
- 创建更新 CSS 变量的逻辑
- 找到我们需要的元素
- 附加事件处理程序
- 执行负责变量更新的代码
负责变量更新的函数：
const handleThemeUpdate = (cssVars) => {
const root = document.querySelector(':root');
const keys = Object.keys(cssVars);
keys.forEach(key => {
root.style.setProperty(key, cssVars[key]);
});
}
简而言之，此函数接受一个对象作为参数，并针对每个键更新:root伪类中定义的相应 CSS 变量。为此，我们需要将对象定义为：每个键代表 CSS 变量名，每个键值代表我们要应用的实际 CSS 值。
例子：
{
'--primary-bg-color': 'green'
}
接下来，我们需要找到这些元素并附加事件处理程序：
const themeSwitchers = document.querySelectorAll('span');
const fontSwitcher = document.querySelector('select');
const dynamicInputs = document.querySelectorAll('input');
themeSwitchers.forEach((item) => {
item.addEventListener('click', (e) => {
handleThemeUpdate({
'--primary-bg-color': e.target.getAttribute('data-bg-color'),
'--primary-color': e.target.getAttribute('data-color')
});
});
});
fontSwitcher.addEventListener('change', (e) => {
handleThemeUpdate({
'--primary-font-size': `${e.target.value}px`
});
});
dynamicInputs.forEach((item) => {
item.addEventListener('change', (e) => {
const cssPropName = `--primary-${e.target.id}`;
handleThemeUpdate({
[cssPropName]: e.target.value
});
});
});
希望现在您能理解 HTML、CSS 和 JS 之间的联系。data当用户点击 span 元素时，我们会读取其属性值，并将其赋值给相应的 CSS 变量。
此外，当用户更改颜色选择器元素的值或选择新的字体大小时，所选值将设置为相应的 CSS 变量。
如果您想稍微修改一下代码，请查看在线 fiddle。
感谢阅读，我们下篇文章再见。
延伸阅读
如果你还没看过我之前的文章《CSS变量速查表》，快去看看吧。
如果您对 CSS Flexbox 模块感兴趣，请查看这篇文章。它提供了简单易懂的解释和有趣的学习方法，帮助您掌握它的使用方法。
文章来源：https://dev.to/proticm/ui-theming-with-css-variables-20mp