Element-Plus——暗黑主题设置

在main.js中引入暗黑主题样式

import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/dark/css-vars.css'

在src路径下新建style/dark/css-vars.css文件
这里的样式可自定义配置主题颜色

html.dark {
    
    
    /* 自定义深色背景颜色 */
    /* --el-bg-color: #fff; */
    /* --el-color-primary: #fff */
    --el-menu-active-color:#fff
}

.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
    
    
    --el-color-primary: #000
    --el-color-white:white
}

在页面中通过按钮进行切换

<el-text :style="{marginRight:'10px'}">主题颜色</el-text>
<el-switch inline-prompt :style="{marginRight:'10px'}" active-color="#000" active-text="暗黑主题" inactive-text="默认" v-model="theme" @click="toggle()"></el-switch>

将切换暗黑模式按钮的状态存储在浏览器中
引入包

import {
    
     useToggle } from "@vueuse/shared";
import {
    
     useDark } from "@vueuse/core";

/* start——暗黑模式 */
const theme = ref<boolean>(false);
const isDark = useDark({
    
    
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: "useDarkKEY",
  // 暗黑class名字
  valueDark: "dark",
  // 高亮class名字
  valueLight: "light",
});
console.log(isDark.value);
if (isDark.value == false) {
    
    
  theme.value = false;
} else {
    
    
  theme.value = true;
}
const toggle = useToggle(isDark);
/* End——暗黑模式 */