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

运行效果:


总结

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

相关推荐
阿伟来咯~21 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端26 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱28 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai38 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨39 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
密码小丑1 小时前
11月4日(内网横向移动(一))
笔记
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
鸭鸭梨吖2 小时前
产品经理笔记
笔记·产品经理
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm