vue3项目配合element-plus和css实现主题切换，5分钟学会的小技能

1024小神

已于 2023-06-09 16:12:18 修改

阅读量4.4k

点赞数 3

分类专栏： HTML前端文章标签： css javascript 前端

于 2023-06-09 15:38:47 首次发布

本文链接：https://blog.csdn.net/weixin_44786530/article/details/131128505

版权

HTML前端专栏收录该内容

730 篇文章

订阅专栏

在开发自己的小项目过程中，临时起意想做一个光暗主题切换，于是就开始各种查资料捣鼓，看看 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")
    }
}