当初越来越多的网站都提供了更换主题性能，如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