主题色变量和var实现多套主题换肤

一、前言

前端换肤有2种，一种是定义好多套主题的换肤，另一种是随意配置主题色换肤。而且很多是使用UI库提供的变色方案，本片文章是纯主题色变量和var一起使用实现换肤效果。以下2种换肤方案有兴趣业务适配的可以点击标题了解下：

1.1、Vue+ElementUI实现多套主题换肤

1.2、Vue+ElementUI实现在线动态换肤

二、实现

2.1、多主题色定义

• 定义根伪类 :root，代码第 2 和 7 行。分别定义了默认和带参数的伪类；
• 定义 CSS 变量，变量名需要以两个减号（--）开始；
• 多主题的话就添加多个带参数的伪类，例如my-theme=myTheme02、my-theme=myTheme03等等；

/* 默认 */
:root {
    --box-bg-01: yellow;
    --box-bg-02: blue;
}
/* 带参数 myTheme02 */
:root[my-theme=myTheme02] {
    --box-bg-01: red;
    --box-bg-02: green;
}

2.2、根节点属性修改

设置根节点html属性my-theme

const type = document.documentElement.getAttribute('my-theme')==='myTheme02' ? '' : 'myTheme02';
document.documentElement.setAttribute('my-theme', type);

2.2.1、默认主题

可看到下图右侧 html 标签上无其它属性

2.2.2、带参主题 myTheme02

可看到下图右侧 html 标签上有属性my-theme

2.3、效果

2.4、源码

三、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞收藏关注✨。创作不易，给我打打气，加加油☕