ElementPlus在最新的正式版已经完美支持暗黑模式了，但是在我们的项目中肯定会用到非ElementPlus官方提供的颜色，此时我们可以定义变量来适配ElementPlus实现全局暗黑模式。

首先在main.js引入ElementPlus暗黑模式样式

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

安装 vueuse

npm i -D @vueuse/core

切换功能实现，svg-icon是图标，你也可以使用图标或者ElementPlus组件实现

<template>
  <div v-bind="$attrs" @click.stop="toggleDark()">
    <svg-icon v-if="isDark" icon="light" />
    <svg-icon v-else icon="dark" />
  </div>
</template>

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

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

自定义颜色

在项目开发中我们不可能全都使用ElementPlus组件，在自定义样式时就要考虑暗黑模式的是适配性问题了，创建文件：src/styles/element.scss

:root {
  --bg-contrast: #ffffff;
  --text-top-color: #5a5e66; //顶部菜单按钮颜色
  --top-box-shadow: rgba(0, 21, 41, 0.08); //顶部菜单底边阴影
}

html.dark {
  --bg-contrast: #000000;
  --text-top-color: #c0c0c0;
  --top-box-shadow: rgba(225, 225, 225, 0.32);
}

main.js中导入

import "./styles/element.scss"

vue文件中通过 var(变量名称) 使用

<style lang="scss" scoped>
    .right-menu-item {
        color: var(--text-top-color);
    }
</style>