使用element-plus+vueuse两步一分钟实现主题切换

dark主题

light主题

第一步：将element-plus的css样式引入到main.js/main.ts

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

第二步：安装 vueuse 后布置样式切换，我这里是通过点击图标切换

<el-icon :size="30" @click="toggleDark()">
  <i-ep-moon v-if="isDark" />           
  <i-ep-sunny v-else />
</el-icon>

//script setup
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();
const toggleDark = useToggle(isDark);

OK了家人们！

实现原理也很简单，就是在html上添加/移除class="dark"

element-plus.gitee.io/en-US/guide…  vueuse.org/core/useDar…