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——暗黑模式 */

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！