vue3+elementPlus 深色主题切换
首先安装需要的两个依赖
1 | npm i @vueuse /corenpm 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})
最终效果
深色模式
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)