Skip to content

安装:

npm i @vueuse/core

设置暗黑模式

main.js

js
import "element-plus/theme-chalk/dark/css-vars.css"; //这里必须要引入全局暗黑css样式
import "./styles/dark/css-vars.css"; //引入自定义的样式,覆盖默认的暗黑样式
// import "./style.css"; //如果要使用暗黑主题就不能引入这个了,大坑

App.vue 或者其他组件中

vue
<!-- vue3.2写法 -->
<script setup>
    import { useDark, useToggle } from "@vueuse/core";
    const isDark = useDark();
    const toggleDark = useToggle(isDark);
</script>

<!-- 对应vue3.2的 -->
<span @click.stop="toggleDark()">暗黑模式</span>
<el-switch size="small" v-model="isDark" />