一、前言

前端换肤有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、源码

<template>
  <div>
    <div><el-button @click="changeTheme">主题切换</el-button></div>
    <div class="box box01"></div>
    <div class="box box02"></div>
  </div>
</template>
<script>
export default {
  methods: {
    changeTheme() {
      const theme = document.documentElement.getAttribute('my-theme')
      const type = theme ==='myTheme02' ? '' : 'myTheme02';
      document.documentElement.setAttribute('my-theme', type);
    }
  }
}
</script>
<style>
/* 默认 */
:root {
  --box-bg-01: yellow;
  --box-bg-02: blue;
}
/* 带参数的 */
:root[my-theme=myTheme02] {
  --box-bg-01: red;
  --box-bg-02: green;
}
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.box01 {
  background: var(--box-bg-01);
}
.box02 {
  background: var(--box-bg-02);
}
</style>

三、最后

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