前端 “一键换色“ 的几种方案

现在越来越多的网站都提供了更换主题功能，如 ElementUI，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制功能。

最近刚好做了这个功能，主要通过以下几种方式实现：

CSS 样式覆盖

核心通过切换 CSS 选择器得方式实现主题样式的切换：

1.在组件中保留不变的样式，将需要变化的样式进行抽离

2.提供多种样式，给不同的主题定义一个对应的 CSS 选择器 3.根据不同主题设置不同的样式

实现

下面通过 vuex 存储和控制全局的主颜色，其代码如下：

在 template 模板中通过 vuex 中的主题设置对应类名，如头部代码如下：

下面 theme.css 中通过 .light 和 .dark 两个类选择器来区分明亮主题和黑暗主题，并且事先准备了它们对应的样式，如下：

缺点

1.多种主题样式都要引入，导致代码量增大 2.样式不易管理 3.查找样式复杂 4.开发效率低 5.拓展性差…

实现多套 CSS 样式

核心

实现多套 CSS 主题样式，根据用户切换操作，通过 link 标签动态加载不同的主题样式，主要解决了多个主题色被编译到一个文件中导致单个文件过大。

实现

css 部分直接拆分成 light.css 和 dark.css 两个文件：

设置主题部分的 setTheme.js 代码如下：

缺点

1.需要重复 CV 多份样式文件进行单独修改 2.没有单独提取出可变的样式部分 3.需要提前知道打包后的文件路径，否则可能导致主题样式引入错误…

CSS 变量实现核心

通过 body.style.setProperty(key, value) 动态修改 body 上的 CSS 变量，使得页面上的其它部分可以应用最新的 CSS 变量对应的样式。

实现

theme.css 中负责定义全局 CSS 变量，代码如下：

通过 var() 在组件中应用对应 CSS 变量，比如在头部中的使用：

实现了前面的内容之后，现在分别给 light 和 dark 主题添加图片

最后

以上就是目前了解到得一些更换主题得方案，全部基于 CSS 去实现的，不过知道了原理就可以结合 less 和 sass 进行更好的实现。如果有更好的方案，欢迎分享！

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 ！

免费获取源码地址：http://www.crmeb.com

PHP 学习手册：https://doc.crmeb.com

技术交流论坛：https://q.crmeb.com