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})
最终效果
深色模式