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

运行效果:


总结

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

相关推荐
盛夏绽放6 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao22 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo22 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er28 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年32 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er35 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing36 分钟前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
西岭千秋雪_39 分钟前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
小诸葛的博客41 分钟前
gin如何返回html
前端·html·gin
XvnNing41 分钟前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发