vue3+elementPlus 深色主题切换

发布时间 2023-04-01 17:58:45作者: 初生土豆

首先安装需要的两个依赖

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})

最终效果

 

 深色模式