在线切换主题颜色无效_HeyUI组件库 | 如何实现在线切换主题

目前支持在线切换主题的组件库

如果有更多的，请在下方留言，我会后期补充。

ant-design

目前ant-design支持的切换主题颜色是在页面最下方。

是的，如果你不仔细，你是不知道系统有这个功能的，而ant-design是使用js直接编译的。

然后这里要吐槽一个点，随便切换什么颜色都很卡，因为没有确认按钮，所以随便调一个小颜色，也会去重新渲染，值得改进....

ant-design使用的less，和HeyUI是一致的，并且也提供全局less变量定义功能，和Hey-Cli的globalVars也是差不多的功能。

至于具体实现，我在后面细说。

Element

其实饿了么的切换主题色的功能是很明显的，就在主页上方位置。

切换颜色的交互我要狠狠的夸赞一番，有确认按钮，切换顺畅，一比较立竿见影。

然后饿了么使用的是scss，其实都差不多的，因为主要功能大致都是差不多的。

HeyUI

HeyUI组件库是在11月刚刚把切换主题的功能上线的。

当然，系统中配置主题，我们一直是支持的，只是一直没有尝试实现官网切换主题的功能。

基于官网上次的改版，有人建议把下面四个颜色块当做切换主题色的入口，我觉得挺好，于是抽空来实现了一下。

戳我去官网试试

实现方案

首先，ant-design是js渲染的，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 linkif(old) {head.removeChild(old);}
}

至此，在线切换主题色的开发就完成了。

HeyUI

其实在10月份，HeyUI也完成走马灯与穿梭框的开发。

如果感兴趣，也可以去看看：

Carousel 走马灯
Transfer 穿梭框

或许你还对HeyUI不熟悉，欢迎去我们的github参观：

https://github.com/heyui/heyui

当然，star的行为也是极其鼓励的。

下周，我们将计划开发HeyUI的Admin系统，尽请期待。