给ElementPlus添加暗色模式记录

开发的 uTools 插件因为暗色模式下看不清菜单被打回了。本来想着看看能不能给 el-tabs 字体颜色改一下，经过一顿AI之后发现不可行，然后就发现了暗色模式这个好东西。

我的需求是 如果当前系统是暗色主题 就切换成 深色模式 ，如果是浅色主题就默认主题

SqlConvert插件支持的功能:

1. excel/ navicat 复制数据转 in 语句
2. ddl语句或列字段 生成 <foreach>句
3. ddl语句或列字段 生成 insertBath/ updateBath
4. ddl建表语句 生成 java/vue 代码
5. MybatisLog 转换 sql语句

1. 具体实现

本次是按照 ElementPlus 官网介绍的 useDrak 这个库来实现的

1. 安装依赖

pnpm add @vueuse/core

2. main.js 添加 ElementPlus 的暗色主题

// 引入暗黑模式样式
import 'element-plus/theme-chalk/dark/css-vars.css';

3. 在App.vue中判断主题并切换颜色

<script setup>
import SqlConvert from '@/views/SqlConvert.vue'
import { defineOptions, onMounted, computed, watch } from 'vue'

import { useDark, usePreferredDark } from '@vueuse/core'

defineOptions({
  name: 'App'
})

const isSystemDark = usePreferredDark()
console.log(isSystemDark.value, 'systemDark')
// 使用 useDark 检测系统偏好主题
const isDark = useDark({
  selector: 'html', // 应用到 body 元素
  attribute: 'class', // 使用 class 来切换主题
  valueDark: 'dark', // 暗色主题的 class
  valueLight: '', // 浅色主题的 class
})
watch(isSystemDark, (newValue, oldValue) => {
  isDark.value = newValue
})
isDark.value = isSystemDark.value
// 根据 isDark 的值切换 Element Plus 的主题
const theme = computed(() => (isDark.value ? 'dark' : ''))
</script>

不知道为什么，我用那种通过 el-switch 切换主题的方式，背景颜色一直是白色的，不会变成黑色的，也不知道是什么原因，有没有大佬告知一下