Vue3 + ElementPlus 实现暗黑模式

通过 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中文文档
@vueuse/core英文文档

3、在 App.vue 中测试

<template>
  <div>
    <span @click.stop="toggleDark()">暗黑模式</span>
    <el-switch size="small" v-model="isDark" />
  </div>
</template>

<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<style scoped></style>

4、效果展示

原始效果

暗黑模式