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

运行效果:


总结

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

相关推荐
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css
白水清风19 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix19 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780019 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端19 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧19 小时前
Promise 的使用
前端·javascript