element-plus添加暗黑模式

Bunury2025-04-23 17:13

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");
  }
};

补充:

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