CSS 多主题切换思路

前言

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

实现

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

• 定义根伪类 :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 定义在全局样式中；