现在越来越多的网站提供了换主题的功能，比如ElementUI，它提供的个性化定制不仅满足用户的需求，也突出自己的特色功能。最近刚做了这个功能，主要是通过以下方式实现的：CSS样式覆盖核心通过切换CSS选择器实现主题样式切换：1.保持组件中相同的样式，提取需要改变的样式2.提供多种样式，为不同的主题定义对应的CSS选择器3.根据不同的主题设置不同的样式通过vuex实现如下全局主色的存储和控制，代码如下：在template模板中通过vuex对应类名中的主题设置，比如header代码如下：在下面的theme.css中，.light和.dark两个类选择器，用于区分浅色和深色主题，以及它们对应的样式提前准备好，如下：缺点1.必须引入多种主题样式，导致代码量增加2.样式不易管理3.查找样式复杂ed4.开发效率低5.扩展性差...实现多套CSS样式核心实现多套CSS主题样式，根据用户切换操作，通过link标签动态加载不同的主题样式，主要解决的问题是多个主题色编译成一个文件，导致单个文件过大。实现css部分直接拆分为light.css和dark.css两个文件：设置主题部分的setTheme.js代码如下：缺点1.需要重复多个CV样式文件单独修改2.没有单独修改变量Style的提取part3.需要提前知道打包后的文件路径，否则可能会导致主题样式引入错误...CSS变量实现核心通过body.style.setProperty(key,value),以便页面其他部分应用最新的CSS变量对应的Styles。theme.css的实现负责定义全局CSS变量。代码如下：通过var()在组件中应用相应的CSS变量，比如header中的使用：实现了前面的内容，现在分别给浅色和深色主题添加图片最后，以上是一些解决方案对于改变主题，我目前所学的，都是基于CSS的，但是如果知道原理的话，可以结合less和sass来更好的实现。如果有更好的解决方案，欢迎分享！如果您觉得这篇文章对您有用，请给我们的开源项目一个小星星：http://github.crmeb.net/u/defu非常感谢！免费源码地址：http://www.crmeb.comPHP学习手册：https://doc.crmeb.com技术交流论坛：https://q.crmeb.com
