目前支持在线切换主题的组件库
如果有更多的，请在下方留言，我会后期补充。
ant-design
目前ant-design支持的切换主题颜色是在页面最下方。
是的，如果你不仔细，你是不知道系统有这个功能的。
然后这里要吐槽一个点，随便切换什么颜色都很卡，因为没有确认按钮，所以随便调一个小颜色，也会去后端请求，值得改进....
ant-design使用的less，和HeyUI是一致的，并且也提供全局less变量定义功能，和Hey-Cli的globalVars也是差不多的功能。
antd的在线切换其实是前端在线编译的，所以速度比较卡顿，再加上颜色组件的设计，所以显得更加卡了。
Element
其实饿了么的切换主题色的功能是很明显的，就在主页上方位置。
切换颜色的交互我要狠狠的夸赞一番，有确认按钮，切换顺畅，一比较立竿见影。
然后饿了么使用的是scss，其实都差不多的，因为主要功能大致都是差不多的。
HeyUI
HeyUI组件库是在11月刚刚把切换主题的功能上线的。
当然，系统中配置主题，我们一直是支持的，只是一直没有尝试实现官网切换主题的功能。
基于官网上次的改版，有人建议把下面四个颜色块当做切换主题色的入口，我觉得挺好，于是抽空来实现了一下。
实现方案
首先，ant-design和element是需要后端服务的，考虑到我想要的效果，我觉得改成固定4个主题方案，这样就可以免了后端的服务。
关于HeyUI切换主题的方案有两套，由于需要直接转换成css，所以选择第二套方案：替换var.less中的变量定义。
具体参考文档：更换主题
@import (less) "~heyui/themes/var.less";
//重新定义主题
@primary-color: #FDA729;
@red-color: #D64244;
@green-color: #3cb357;
@yellow-color: #EAC12C;
@blue-color: #77A2DC;
@import (less) "~heyui/themes/common.less";
//使用这种方式引用，可以在自己的less文件中使用var.less定义的变量。
@import (less) "自己的less文件";
复制代码开发步骤
1、提取系统的less文件
官网系统之前只有一套主题，所以官网系统只有一个独立的doc.less文件。
现在要生成4套主题，所以系统的样式需要独立出来。
- doc.less
- index.less
- var.less
复制代码index.less作为系统默认的主题，doc.less是系统中定义的样式。
2、定义四套主题
如下所示，在doc中新建themes文件夹，保存四套主题。
主题的大致内容就是定义样式变量，引用系统中的less文件。
以yellow中的index.less为例：
@import (less) "../../../themes/var.less";
// Color
@primary-color : #b6cf4d;
@link-color : @primary-color;
@blue-color : #356ba8; //info
@green-color : #378c2b; //success
@yellow-color : #aa9f30; //warn
@red-color : #8c2b3a; //error
@input-height: 32px;
@import (less) "../../../themes/common.less";
@import (less) "../../css/doc.less";
复制代码3、生成四套主题css文件
由于四套主题都是需要异步加载的，所以需要先编译成css文件。
这一点和ant-design以及element不一样，他们都是使用后端实时生成css文件，但是大致的逻辑是一致的。
新建命令文件gencss.sh，并且执行：
lessc ./doc/themes/yellow/index.less>./doc/themes/yellow/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/red/index.less>./doc/themes/red/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/pink/index.less>./doc/themes/pink/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/lavender/index.less>./doc/themes/lavender/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
复制代码4、Js调用切换css调用
在首页的方法中添加css的调用方法。
dynamicLoadCss(type) {
let old = document.getElementById('loadcss');
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type='text/css';
link.rel = 'stylesheet';
link.href = `/themes/${type}/index.css`;
link.id = 'loadcss';
head.appendChild(link);
// delete old link
if(old) {
head.removeChild(old);
}
}
复制代码至此，在线切换主题色的开发就完成了。
HeyUI
其实在10月份，HeyUI也完成走马灯与穿梭框的开发。
如果感兴趣，也可以去看看：
或许你还对HeyUI不熟悉，欢迎去我们的github参观：
当然，star的行为也是极其鼓励的??。
下周，我们将计划开发HeyUI的Admin系统，尽请期待。