学习 element-plus开启暗黑模式

前言

之前自己一直对暗黑模式挺感兴趣的，但是一直没有去做，这边使用element-plus 简单的实现一下暗黑模式的切换

如何实现element-plus的暗黑模式

按照官方文档的步骤，可以知道要想使用element-plus暗黑模式，必须在我们的入口文件(main.ts)将import 'element-plus/theme-chalk/dark/css-vars.css'引入到我们的文件当中

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

要想控制暗黑模式，还需要在其根节点(html)上控制是否添加了dark这个类，通过在根节点(html)上添加删除dark类，来实现暗黑模式的切换。

通过element-plus组件中的switch组件，来进行暗黑模式的切换，在组件种可以设置icon，来达到提示作用，你是关闭还是打开了暗黑模式

<el-switch @change="changeDark" v-model="dark" class="mt-2" style="margin-left: 24px" inline-prompt active-icon="MoonNight" inactive-icon="Sunny" />

我们在给switch组件绑定一个change 事件，通过change事件来获取html的根节点，在通过给根节点绑定，dark类来达到实现暗黑模式的效果

    // switch切换事件进行暗黑模式的切换
const changeDark = () => {
    // 获取html根节点元素
    let html = document.documentElement as HTMLElement;
    // 判断是否为暗黑模式
    dark.value ? html.className = 'dark' : html.className = ''
}

这样全部设置完毕之后，就达到了暗黑模式的切换了

、

总结

第一步：在main.ts导入'element-plus/theme-chalk/dark/css-vars.css'`

第二步：设置切换的el-switch组件，给组件绑定change事件

第三步：获取html根节点元素，设置是否设置dark类名

通过上面的三步就可以使用element-plus框架自带的暗黑模式切换了