前言

本篇仅提供多主题切换思路，示例简单且清晰。

实现

步骤一：多主题(颜色)定义

• 定义根伪类 :root，代码第 2 和 7 行。分别定义了默认和带参数的伪类；
• 定义 CSS 变量，注意变量名需要以两个减号（--）开始；
• 注意此处仅设置了两个主题，多主题同理；

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

步骤二：主题切换

• 直接控制 html 根节点；

changeTheme() {let type = document.documentElement.getAttribute('my-theme')==='myTheme02' ? '' : 'myTheme02';document.documentElement.setAttribute('my-theme', type);
}

默认主题：可看到下图右侧 html 标签上无其它属性。样式 root 中有可查看CSS变量。

带参主题 myTheme02：可看到下图右侧 html 标签上有属性my-theme。样式 root 中有可查看CSS变量。

效果

完整代码

• 代码 19 - 30 行，注意 :root 定义在全局样式中；

<template><div><div><button @click="changeTheme">主题切换</button></div><div class="box box01"></div><div class="box box02"></div></div>
</template><script>
export default {methods: {changeTheme() {let type = document.documentElement.getAttribute('my-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;
}
</style>
<style lang="stylus" scoped>
.box {display: inline-block;width: 100px;height: 100px;
}
.box01 {background: var(--box-bg-01);
}
.box02 {background: var(--box-bg-02);
}
</style>