element-plus添加暗黑模式

main.ts文件

javascript 复制代码
//引入暗黑模式样式
import "element-plus/theme-chalk/dark/css-vars.css"; 

style.scss文件

css 复制代码
// 设置默认主题色
:root {
  --base-menu-min-width: 80px;
  --el-color-primary-light-5: green !important;
  --route--view--background-color: #fff !important; //二级路由出口背景颜色
  --el-color-primary-light-3: rgb(2, 173, 2) !important;
  --el-color-primary-dark-2: green !important;
  --base-menu-background: #fff !important;
  --el-color-primary: green !important; //缩放侧边栏颜色
  --el-color-primary-light-9: transparent !important; //缩放侧边栏背景颜色
  // --el-menu-bg-color: rgb(63, 62, 62) !important; //侧边栏背景颜色
  --el-menu-text-color: #000 !important; //侧边栏文字颜色
}

//暗黑主题
body.dark {
  --el-color-primary-light-5: rgb(145, 145, 145) !important;
  --el-color-primary: gray !important;
  --el-color-primary-light-3: rgb(150, 150, 150) !important;
  --route--view--background-color: #000 !important;
  --el-color-primary-dark-2: rgb(175, 175, 175) !important;
  --el-menu-text-color: #fff !important;
  --base-menu-background: #000 !important;
  --el-menu-bg-color: black !important;
  --el-menu-active-color: var(--el-color-primary) !important;
}

切换暗黑模式按钮

javascript 复制代码
<el-switch v-model="str" @click="handle">黑色</el-switch>

const handle = () => {
  //body加个dark类名
  if (str.value) {
    document.body.classList.add("dark");
    // 给html添加dark类名
    document.documentElement.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
    // 给html移除dark类名
    document.documentElement.classList.remove("dark");
  }
};

补充:

注意:侧边栏背景与路由出口背景色需要另外设置变量切换。

相关推荐
HashTang8 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
liu****8 分钟前
4.基础开发工具(一)
linux·开发语言·1024程序员节
文火冰糖的硅基工坊8 分钟前
[人工智能-大模型-72]:模型层技术 - 模型训练六大步:①数据预处理 - 基本功能与对应的基本组成函数
开发语言·人工智能·python
小龙报12 分钟前
《C语言疑难点 --- 字符函数和字符串函数专题(上)》
c语言·开发语言·c++·算法·学习方法·业界资讯·visual studio
凭君语未可17 分钟前
深度解析Java的多态特性
java·开发语言
Cory.眼21 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
csbysj202028 分钟前
DTD 元素:XML 与 SGML 文档结构解析指南
开发语言
傻童:CPU41 分钟前
C语言练习题
c语言·开发语言
前端架构师-老李44 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
极地星光1 小时前
协程:实战与系统集成(高级篇)
开发语言