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

作者：知新_RL | 2024-02-14 22:15:49

踩

element plus 主题

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

效果展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/82096

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

css自定义属性讲解

在style文件夹下创建theme.css

通过js控制切换主题

效果展示

`css`自定义属性讲解