在开发自己的小项目过程中，临时起意想做一个光暗主题切换，于是就开始各种查资料捣鼓，看看 less 怎么办，再找找 scss 怎么整。偶然发现知乎上有一篇对国外大神文章的翻译，介绍了使用 css 实现的主题切换。于是在自己的项目中动手试了一下，真的超级简单
先看一下我的小软件实现的两种主题：暗黑，亮白，当然还可以自己定义多种形式
亮白模式：
暗黑模式：还需要再继续调整
css自定义属性讲解
- 以
--开头的属性，另外scss是以$开头，less是以@开头 - 定义后通过
var()使用变量 - 在
:root选择器中定义， 可以作用于全局文档中的所有元素
在style文件夹下创建theme.css
可以自己额外再添加主题样式，我这里就添加了dark和light两种
/* 默认dark主题 */
:root[theme='dark'] {
--bg-color: #0d1117;
--text-color: #f0f6fc;
}
/* light主题 */
:root[theme='light'] {
--bg-color: #ecf0f3;
--text-color: #181818;
}
然后在main.ts中引入
在index.css或者vue文件中可以使用var变量引用上面的主题颜色：例如我在index.css中引用这个背景色，在login.css中引入字体颜色：
通过js控制切换主题
- 通过
switch标签的change事件切换 document.documentElement引用文档的根元素DOM，即<HTML>元素- 通过添加和移除
theme属性达到切换css的目的，或者切换属性值
// 切换主题
const chageTheme = (val: Boolean) => {
if (!val) {
document.documentElement.setAttribute('theme', 'light')
} else {
document.documentElement.setAttribute('theme', 'dark')
}
}如果你有使用element plus框架，可以配合element plus的亮暗主题切换：
需要先在main.ts中引入暗色主题：
import 'element-plus/theme-chalk/dark/css-vars.css'//这句是暗黑模式切换然后通过js控制切换主题模式：
const chageTheme = (val: Boolean) => {
if (!val) {
document.documentElement.setAttribute('theme', 'light')
document.querySelector("html")?.classList.remove("dark")
document.querySelector("html")?.classList.add("light")
} else {
document.documentElement.setAttribute('theme', 'dark')
document.querySelector("html")?.classList.remove("light")
document.querySelector("html")?.classList.add("dark")
}
}效果展示
