在开发自己的小项目过程中，临时起意想做一个光暗主题切换，于是就开始各种查资料捣鼓，看看 less 怎么办，再找找 scss 怎么整。偶然发现知乎上有一篇对国外大神文章的翻译，介绍了使用 css 实现的主题切换。于是在自己的项目中动手试一试~
css 自定义属性
- 以
--开头的属性，另外scss是以$开头，less是以@开头 - 定义后通过
var()使用变量 - 在
:root选择器中定义， 可以作用于全局文档中的所有元素
光暗主题配色参考
github~
// style/variable.css
/* 默认dark主题 */
:root {
--bg-color: #0d1117;
--text-color: #f0f6fc;
}
/* light主题 */
:root[theme='light'] {
--bg-color: #fff;
--text-color: #2c3e50;
}
// App.vue
#app {
/* 字体颜色 */
color: var(--text-color);
/* 背景颜色 */
background-color: var(--bg-color);
}
/* tips: 根据实际配置,我个人参考 github 做的是 hedaer 是保持颜色不变,只改变 content 部分 */
/* 使用方法一致 */
js 属性切换
- 通过
switch标签的change事件切换 document.documentElement引用文档的根元素DOM，即<HTML>元素- 通过添加和移除
theme属性达到切换css的目的
// val: true - 暗, false - 光
const handleThemeChange = (val: Boolean) => {
if (!val) {
document.documentElement.setAttribute('theme', 'light')
} else {
document.documentElement.removeAttribute('theme')
}
}
效果展示
