个人小记——通过css变量方式，实现主题切换

1、杂谈

主题切换一般在项目中都会有要求，就比如我们前端常用的开发工具，就有明亮色，深色多种主题；根据项目需求的不同，有多种多样的功能要求，比如跟随系统主题，自定义切换，根据不同客户打包成不同主题色等等；以前遇到这种需求，通常会想到配置多套主题样式，比如：

js 复制代码

.blue {
    color: #0000ff;
    ...
}

.green {
    color: #0000ff;
    ...
}

// 然后使用时 用

为此可能一套主题就需要单独写一个样式文件，这样做也没什么问题，功能都是可以实现的，缺点个人觉得是，每个地方的细节都要用一套样式去维护，如果有一个地方需要调整，比如按钮圆角规范从4px变成6px，就需要去把所有的样式文件都进行修改一遍，这稍微对开发者有些不友好。

为了解决维护问题，像less、sass都提出了变量功能，这样的好处就是一次声明，多次引用，我们不需要考虑具体用的地方，只需要维护一套主题样式配置。css变量也是这么一个功能。

2、介绍

变量命名：通过两个破折号（--）开头，如 --theme-color: #0042ff; (备注：变量是区分大小写的，并且破折号开头是必须的，约定的，类似与sass中以$开头，less中以@开头)

变量使用：通过var()函数，在需要使用的地方使用，参数是你想要使用的css变量，如：var(--theme-color)，这样就可以使用刚刚定义过的主题色变量；也可以加上第二个参数value，这是可选参数：默认值，当css变量不存在时，会使用默认值，如 var(--theme-color, #00ffff)

注意：变量使用是当属性值去使用

变量的作用域：变量的作用域是根据声明变量的选择器来的，比如：

js 复制代码

div { 
    --div-font: 16px;
}

在任意的div中就可以通过使用 var(--div-font)使用, 但是在其他标签下使用是无效的, 如下示例：仅p标签下的变量生效

如果想要设置全局的css变量，可以通过 :root { ... } 去定义，也可以直接html，body等，这样基本上页面里的位置都可以使用自己定义的变量；

兼容性：css变量的概念毕竟是后面提出的，对于较老的浏览器还是会有兼容性问题的（但是吧，谷歌最新都120以上版本了，你确定还要使用50以下的版本嘛）

3、个人主题色切换的简单实现方式

上代码（通过掘金代码片段直接写的示例，仅供参考）

html 复制代码

<div id="app">
  <div class="demo-part">hello world</div>

  <button onclick="setTheme('red')">red</button>
  <button onclick="setTheme('green')">green</button>
  <button onclick="setTheme('dark')">dark</button>
  <button onclick="setTheme('white')">white</button>
  <button onclick="setTheme('default')">default</button>
</div>

css 复制代码

:root {
  --theme-color: #0000ff;
  --theme-background: #eee;
}

html[data-theme='red'] {
  --theme-color: #ff0000;
  --theme-background: #666;
}

html[data-theme='green'] {
  --theme-color: #00ff00;
  --theme-background: #ff0000;
}

html[data-theme='dark'] {
  --theme-color: #fff;
  --theme-background: #000;
}

html[data-theme='white'] {
  --theme-color: #000;
  --theme-background: #fff;
}

.demo-part {
  color: var(--theme-color);
  background-color: var(--theme-background);
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
}

js 复制代码

function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
}

效果

red按钮点击

green按钮点击

以上仅是简单实现，仅供参考，第一次更新博客，不足之处请各位大佬多多指教