vue3+elementPlus 深色主题切换

首先安装需要的两个依赖

npm i @vueuse/core

npm install element-plus --save

在main.js中引入css文件，自定义深色背景颜色 可以看ElementPlus官方网站

//引入elementUI
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//引入暗黑模式
import 'element-plus/theme-chalk/dark/css-vars.css'

在TopNav组件中实现，我这里搞复杂了，在两个vue文件里面修改，在一个里面就行（太懒了，不想改了）

<el-switch
          v-model="isDarkTheme"
          @change="toLight()"
          inline-prompt
          active-icon="Moon" inactive-icon="Sunny"
/>

js部分：

import {useMyDark} from "@/stores/dark";

//读取缓存，判断是否为深色模式
const isDarkTheme = ref(localStorage.getItem('useDarkKEY')==='dark')
const isDark = useDark({
  storageKey:'useDarkKEY',
  valueDark:'dark',
  valueLight:'light'
})
/**
*@Date:2023-04-01 14:07:39
*@description：深色模式切换，主要是靠这个useToggle实现
*@param{}参数说明
*@return：返回值
*/
const toLight = useToggle(isDark)

const useMyStoreDark = useMyDark()

/** *@Date:2023-04-01 17:17:06 
*@description：监听深色模式的值，修改pinia中的值 
*@param{}参数说明 
*@return：返回值 */
 watchEffect(()=>{ useMyStoreDark.$patch({ isDark:isDarkTheme.value }) })

在home.vue中

import {storeToRefs} from "pinia";
import {useMyDark} from "@/stores/dark";

/**
*@Date:2023-04-01 17:21:55
*@description：修改body背景颜色
*@param{}参数说明
*@return：返回值
*/
const setDarkTheme = ()=>{
  const body = document.getElementsByTagName('body')[0]
  if(isDark.value===true){
    body.classList.add('body_dark_color')
  }else{
    body.classList.remove('body_dark_color')
  }
}

const { isDark } = storeToRefs(useMyDark())

/** *@Date:2023-04-01 15:25:06 
*@description：监听pinia中isDark值变化 
*@param{}参数说明
*@return：返回值 */ 
watch(isDark,(newVal,oldVal)=>{ setDarkTheme() },{immediate:true})

最终效果

 深色模式