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

文章目录

  • 前言
  • 一键换肤
  • 总结


前言

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


一键换肤

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


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

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

点击事件:

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

运行效果:
在这里插入图片描述
在这里插入图片描述


总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20419.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day05-多任务-正则-装饰器

一、多任务 1-进程和线程 进程是操作系统分配资源的最小单元 线程执行程序的的最小单元 线程依赖进程&#xff0c;可以获取进程的资源 一个程序执行 先要创建进程分配资源&#xff0c;然后使用线程执行任务 默认情况下一个进程中有一个线程 2-多任务介绍 运行多个进程或线程执…

民国漫画杂志《时代漫画》第38期.PDF

时代漫画38.PDF: https://url03.ctfile.com/f/1779803-1248636380-dd7daa?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

CATIA进阶操作——创成式曲面设计入门(1)线架设计,三维点、直线、平面、曲线

目录 引出三维空间点生成三维直线三维平面三维曲线总结异形弹簧新建几何体草图编辑&#xff0c;画一条样条线进行扫掠&#xff0c;圆心和半径画出曲面上的螺旋线再次选择扫掠&#xff0c;圆心和半径 其他自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.进行触发 自定义信号重…

【YOLOv5/v7改进系列】引入ODConv——即插即用的卷积块

一、导言 提出了一种称为全维度动态卷积(ODConv)的新颖设计&#xff0c;旨在克服当前动态卷积方法的局限性并提升卷积神经网络(CNN)的性能。以下是该论文提出的全维度动态卷积设计的优点和存在的缺点分析&#xff1a; 优点&#xff1a; 增强特征学习能力&#xff1a; ODConv通…

【UML用户指南】-04-从代码到UML的关键抽象

1、关键抽象 声明了一个名为paint的操作&#xff0c;它的实现调用名为drawString的另一个操作&#xff0c;drawString操作负责在指定的位置上打印“Hello,World!”。在通常的面向对象的方式下&#xff0c;drawString是一个名称为g的参数上的一个操作&#xff0c;g的类型是类Gr…

VMWare下安装Linux虚拟机(图文)

大家好&#xff0c;在当今科技发展迅速的时代&#xff0c;虚拟化技术在企业和个人用户中变得越来越普遍。VMware作为一款领先的虚拟化软件&#xff0c;为用户提供了在单一物理计算机上运行多个操作系统的能力&#xff0c;为开发、测试和运维等任务提供了便利。在这篇文章中&…

打开C语言常用的内存函数大门(三) —— memset()函数(内含讲解用法和模拟实现)

文章目录 1. 前言2. memset函数2.1 memset函数原型2.2 memset函数参数的介绍2.3 memset函数的使用演示 3. memset函数的模拟实现4. 总结 1. 前言 哈喽&#xff0c;我们又见面了。通过前面两个内存函数(memcpy、memmove函数)讲解的锤炼后&#xff0c;对如何解析一个自己从来没有…

【TB作品】msp430f5529单片机墨水屏,口袋板,tmp421温度,温控风扇

文章目录 一、扬声器模块介绍二、驱动介绍三、程序介绍四、全部代码下载 msp430f5529d单片机墨水屏&#xff0c;口袋板&#xff0c;tmp421温度&#xff0c;温控风扇 基本要求&#xff1a;高于20度开转&#xff0c;温度越高转速越快&#xff0c;高于40度风扇停转&#xff0c;温…

知识计算概述

文章目录 知识计算研究现状技术发展趋势 知识计算 随着知识图谱技术及应用的不断发展&#xff0c;图谱质量和知识完备性成为影响知识图谱应用的两大重要难题&#xff0c;以图谱质量提升、潜在关系挖掘与补全、知识统计与知识推理作为主要研究内容的知识计算成为知识图谱应用的重…

C语言 | Leetcode C语言题解之第119题杨辉三角II

题目&#xff1a; 题解&#xff1a; int* getRow(int rowIndex, int* returnSize) {*returnSize rowIndex 1;int* row malloc(sizeof(int) * (*returnSize));row[0] 1;for (int i 1; i < rowIndex; i) {row[i] 1LL * row[i - 1] * (rowIndex - i 1) / i;}return row…

Qt第三方库QicsTable简单实例(1)

闲来无事&#xff0c;无意间看到一个Qics表格操作第三方库&#xff0c;自己写了一个特别简单的实例&#xff0c;效果如图所示&#xff1a; 操作界面的数据还是特别快的&#xff0c;因为使用了模型

【Spring Cloud】分布式配置动态刷新

目录 问题解决方案1.使用Spring Boot Actuator监控接口【不推荐】流程图使用Spring Boot Actuator的步骤 2.Spring Cloud Bus第一种方案问题Spring Cloud Bus流程图Spring Cloud Bus实现客户端刷新的步骤开发准备实现1. 在config-server中添加依赖2.在config-server中添加配置a…

你喜欢什么样的狗?喜欢内狗还是外狗?论看门狗的重要性:极低功耗微处理器复位电路CN803/CN809/CN810

看门狗&#xff1a;缩写WTD,英文WATCH DOG. 你的程序会死机吗&#xff1f; 陷入死循环或程序指针不知跑哪里去了&#xff0c;看门狗的作用是把程序拉回来&#xff0c;重新开始跑。 有了看门狗&#xff0c;程序就不会死机&#xff0c;所以很重要。 比如一个温度控制器&#xf…

OBproxy基础运维

简介 obproxy 属于OceanBase的代理&#xff0c;生产环境中 OceanBase 数据库的数据 会以 多副本的形式 存放在各个 OBServer 节点上&#xff0c;obproxy 接收用户发出的 SQL 请求&#xff0c;并将 SQL 请求转发至最佳目标 OBServer 节点&#xff0c;最后将执行结果返回给用户&…

算法题解记录27+++随机链表的复制(百日筑基)

一、题目描述&#xff1a; 题目难度&#xff1a;中等 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每…

小柴带你学AutoSar系列一、基础知识篇(4)编译

小柴带你学AutoSar总目录https://blog.csdn.net/qianshang52013/article/details/138140235?spm1001.2014.3001.5501 Flechazohttps://www.zhihu.com/people/jiu_sheng 编译真的很重要&#xff01;了解一下机器是如何工作的吧。当然啦&#xff01;通过学习这篇文章还可以学习…

unityBIM

Revit模型到Unity勉强能用 1、Revit直接导出FBX&#xff0c;然后拖到unity里面 2、通过Navisworks导出FBX&#xff0c;拖到unity里面。 我什么都还没做&#xff0c;只建立了一个空的URP效果&#xff0c;把FBX拖进去&#xff0c;挂了一个相机控制器&#xff0c;效果勉强看得过…

中医的悠久历史文化

中医&#xff0c;作为中华民族的传统医学&#xff0c;拥有着悠久的历史和深厚的文化底蕴。自古以来&#xff0c;中医便以其独特的理论体系和治疗方法&#xff0c;为中华民族的繁衍昌盛做出了巨大贡献。如今&#xff0c;随着现代医学的不断发展&#xff0c;中医依然以其独特的魅…

【计算机毕设】SpringBoot海滨体育馆管理系统设计与实现 - 源码免费(私信领取)

免费领取源码 &#xff5c; 项目完整可运行 &#xff5c; v&#xff1a;chengn7890 诚招源码校园代理&#xff01; 1. 引言 体育馆作为重要的体育场馆&#xff0c;承担着举办体育赛事、健身活动和文化演出等多种功能。为了提高体育馆的管理效率和服务质量&#xff0c;本项目旨在…

DASK==python并行计算

文档10 Minutes to Dask — Dask documentation demo代码 import numpy as np import pandas as pd import dask.dataframe as dd import dask# 设置调度器为多线程 dask.config.set(schedulerthreads) # 创建一个示例的Pandas DataFrame index pd.date_range("2021-09…