通过 VueUse 中提供的 useDark, useToggle 方法进行实现
1、在 src/assets 中新建 dark.scss
@forward "element-plus/theme-chalk/src/dark/var.scss" with ( $colors: ( //这里定义在暗黑模式下 primary 的颜色,其他同理 "primary": ("base": #ff0000),//默认 #409eff ) ); @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
2、安装 VueUse
安装 @vueuse/core 包 npm install @vueuse/core
@vueuse/core中文文档:https://www.vueusejs.com/
3、在 App.vue 中测试
<template> <div> <span @click.stop="toggleDark()">暗黑模式</span> <el-switch size="small" v-model="isDark" /> </div> </template> <script setup> import { useDark, useToggle } from "@vueuse/core"; const isDark = useDark(); const toggleDark = useToggle(isDark); </script>
4、效果展示
原始效果
暗黑模式