Vue3实战笔记(57)—一键换肤:在Vuetify中打造个性化主题切换体验

文章目录


前言

在当今追求极致用户体验的时代,为应用程序提供个性化的主题切换功能已经成为提升用户满意度和留存率的关键因素之一。Vuetify,作为基于Vue.js的流行前端框架,以其丰富的组件库和高度可定制性,为开发者实现这一功能提供了便利。今天也把自己的项目中实现一键换肤,让应用界面随心所欲地在不同主题间自由切换,为用户带来全新的视觉享受图片。


一键换肤

主题的配置就在引入图标的位置:

javascript 复制代码
export default createVuetify({
  //图标
  icons: {
    defaultSet: 'mdi'||'fa'|| 'mdiSvg' || 'md' || 'fa4' || 'faSvg',//多个不生效,只生效fa
    // aliases,
    sets: {
      fa,
      mdi,
      md,
    },
  },

//主题
  theme: {
    themes: {
        light: {//对亮色主题自定义配置
            dark: false,
            colors: {
                background: '#F7FAGB',
                primary: '#A4A7F2'
            },
        },
    },
},
})

vuetify内置了亮色和暗色主题,非常容易就可以切换,下面在主界面增加一个切换主题的按钮,将这个按钮放在喜欢的地方:

javascript 复制代码
 <v-btn
        @click="toggleTheme"
        variant="text"
        :icon="
            currentTheme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'
        "
  />

点击事件:

javascript 复制代码
import { useTheme } from 'vuetify'

const theme = useTheme()
const currentTheme = computed(() => theme.global.name.value)
function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}

运行效果:


总结

与其忧虑未来,不如拥抱现在。

相关推荐
艾小码9 分钟前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
幸福摩天轮18 分钟前
npm发布包
前端
前端AK君21 分钟前
Gitlab 线上合并冲突的坑
前端
ze_juejin21 分钟前
ES6 Module 深入学习
前端
章丸丸24 分钟前
Tube - Studio Videos
前端·后端
健康平安的活着29 分钟前
langchain4j笔记篇(阳哥)
笔记
因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端