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

news2024/9/26 5:21:53

文章目录

一、前言
- 1.1、[`Vue+ElementUI`实现多套主题换肤](https://blog.csdn.net/u012804440/article/details/133975511)
- 1.2、[`Vue+ElementUI`实现在线动态换肤](https://blog.csdn.net/u012804440/article/details/133975570)
二、实现
- 2.1、多主题色定义
- 2.2、根节点属性修改
- - 2.2.1、默认主题
  - 2.2.2、带参主题 `myTheme02`
- 2.3、效果
- 2.4、源码
三、最后

一、前言

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