element-plus添加暗黑模式

main.ts文件

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

style.scss文件

// 设置默认主题色
: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;
}

切换暗黑模式按钮

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

补充:

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