vue3+Element plus 实现暗黑模式

暗黑模式说明：

暗黑模式是指在应用程序或操作系统中使用暗色背景和浅色文本的界面设计。与传统的亮色模式相比，暗黑模式具有以下特点：

1. 减少眼部疲劳：使用暗色背景可以减少屏幕发出的蓝光，减轻长时间使用电子设备对眼睛的疲劳程度。这对于在晚上或低光环境下使用设备的人来说尤为重要。
2. 节省电池寿命：在有机发光二极管（OLED）或柔性有机发光二极管（AMOLED）屏幕上，黑色像素是不发光的，因此在暗黑模式下使用这些屏幕可以节省电池寿命，延长续航时间。
3. 强调内容：暗黑模式通过减少背景的明亮度，使内容元素更加突出。这有助于提高可读性，并使用户更专注于应用程序或网站中的核心信息。
4. 美观与时尚：暗黑模式因其现代感和时尚外观而受到很多用户的欢迎。它为用户提供了一种与传统亮色界面不同的视觉体验。
5. 暗黑模式现在广泛应用于各种应用程序和操作系统中，包括移动设备、计算机操作系统和各种在线服务。许多应用程序和平台都提供了切换到暗黑模式的选项，以便用户根据自己的偏好进行设置。

 下面使用vue3结合element  plus 实现暗黑模式

首先页面需要定义一个开关用来切换暗黑模式

 <el-switch v-model="value2" class="ml-2" @change="switchchange" />

通过监听开关的触发状态改变暗黑模式

<script setup lang="ts">

import { ref } from 'vue'

const value2 = ref(true)

const switchchange = (val:any) => {

    console.log(val);  //打开是true 关闭是fasle

}

</script>

element plus 提供了暗黑模式的功能

如果需要暗色模式，只需在 html 上添加一个名为 dark 的类 。

但是前提需要安装element plus 并引入样式文件 并引入暗黑样式文件

// main.ts
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css'

然后通过判断开关的打开与关闭添加dark类

const switchchange = (val:any) => {

    let html = document.documentElement  //获取html根元素

    val ? html.className = 'dark' : html.className = '' //判断开关打开添加dark 否则不添加
} 

完整代码

<template>
    <div>
        <el-switch v-model="value2" class="ml-2" @change="switchchange" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

//开关的绑定
const value2 = ref(true)

//开关触发的事件
const switchchange = (val:any) => {

    console.log(val); //开关打开的状态

    let html = document.documentElement

    console.log(html);  //html根元素

    val ? html.className = 'dark' : html.className = '' //判断添加不添加

}
</script>

<style lang="scss" scoped></style>