wordpress插件影响网站,wordpress本地wampserver安装教程,网站建设及空间,揭阳高端网站建设价格前言
本篇仅提供多主题切换思路#xff0c;示例简单且清晰。
实现
步骤一#xff1a;多主题(颜色)定义
定义根伪类 :root#xff0c;代码第 2 和 7 行。分别定义了默认和带参数的伪类#xff1b;定义 CSS 变量#xff0c;注意变量名需要以两个减号#xff08;--…前言
本篇仅提供多主题切换思路示例简单且清晰。
实现
步骤一多主题(颜色)定义
定义根伪类 :root代码第 2 和 7 行。分别定义了默认和带参数的伪类定义 CSS 变量注意变量名需要以两个减号--开始注意此处仅设置了两个主题多主题同理
/* 默认 */
:root {--box-bg-01: yellow;--box-bg-02: blue;
}
/* 带参数 myTheme02 */
:root[my-thememyTheme02] {--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 定义在全局样式中
templatedivdivbutton clickchangeTheme主题切换/button/divdiv classbox box01/divdiv classbox box02/div/div
/templatescript
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-thememyTheme02] {--box-bg-01: red;--box-bg-02: green;
}
/style
style langstylus scoped
.box {display: inline-block;width: 100px;height: 100px;
}
.box01 {background: var(--box-bg-01);
}
.box02 {background: var(--box-bg-02);
}
/style
