共计 992 个字符，预计需要花费 3 分钟才能阅读完成。
当初越来越多的网站都提供了更换主题性能，如 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