1、首先需要安装并引入elemengt plus

//安装
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

//在main.js中引入

// 引入 element-plus 插件与样式
import ElementPlus from 'element-plus'
//引入暗黑模式的样式
import 'element-plus/theme-chalk/dark/css-vars.css'

2、写暗黑模式的样式

<el-switch
    @change='changeDark'      //切换开关时触发该事件
    v-model='dark'            //用于动态切换el-switch开关
    inline-prompt
    active-icon="MoonNight"
    inactive-icon="Sunny"
>
</el-switch>

3、进行暗黑模式的切换

1、收集开关的数据,默认为关闭
let dark=ref<boolean>(false)

2、switch开关的chang事件进行暗黑模式的切换
const changeDark=()=>{
    //获取html根节点，当根节点上有class=‘dark’时，变为暗黑模式
    let html=document.documentElement
    //判断HTML标签是否有类名dark
    //当按钮为关闭时，设置根节点的className为'',当暗黑模式按钮开启时，根节点的className设置为'dark'
    dark.value?html.className = 'dark' : html.className = '';
}