HeyUI组件库 | 如何实现在线切换主题

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

是的，如果你不仔细，你是不知道系统有这个功能的。

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

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

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

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);
  }
}
复制代码

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