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

3,944 阅读4分钟

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

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

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参观:

github.com/heyui/heyui

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

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