Vue3 + Vite + Css3切换主题

news/2024/2/29 16:49:36/文章来源:https://blog.csdn.net/Yue_zuozuo/article/details/135623950

1、css3中变量的作用

一个系统或者说一个项目中,往往涉及到很多颜色,但是如果系统看起来样式规整统一的话可能在色值方面偏靠一个色系,字体,颜色,背景颜色,图标颜色等等。
所有可以在css中定义统一的变量,就不用到处去改防止在修改的时候遗漏。

2、css3中如何声明变量

/**局部设置*/
div {
--bg-color: red;
}
/**全局设置*/
:root{--common-background-color: #FFF;--common-font-color: #333333;
}

3、css3中如何使用变量

  background-color: var(--common-background-color);

4、css3中设备备用值

   background-color: var(--common-background-color, #ffffff);

5、定义变量中遇到的问题

	// 这样是不生效的-- color: #333333box-shadow: 0 4px 12px 10px rgba(var(-- color), 0.08);// 改成这样是可以的-- shadow-color: rgba(var(-- color), 0.08)box-shadow: 0 4px 12px 10px var(--shadow-color);// 不生效--size: '30px';// 这样可以的--size: 30px;

6、切换主题思路(提供了俩种思路)

在网上一顿查找后找到两条思路,可以参考一下element-ui 或者vant-ui 官网上都有切换主题的,但是都是第一种形式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 第一种:在根节点或者父节点追加类名,通过动态修改类名来切换主题样式
  2. 第二种:可以通过 document.documentElement.style.setProperty() 动态修改 css3变量中的值
    分析了一下,第二种不可行的原因,你在项目中设置了100个css3变量,然后你切换主题的时候修改100个值?不现实吧,也可能是我对前端的了解还是比较少,所以采用的第一种。

7、样式主题涉及到那几部分内容的切换?

  1. 背景颜色
  2. 字体颜色
  3. 阴影效果
  4. 图标
  5. 引用的第三方样式

8、上代码

  1. 定义一个切换主题的按钮或者组件 ThemeButton.vue
<template><div class="ThemeButton" @click="changeTheme"><img src="https://b.yzcdn.cn/vant/light-theme.svg" alt="" v-if="darkOrLight" /><img src="https://b.yzcdn.cn/vant/dark-theme.svg" alt="" v-else /></div>
</template><script setup lang="ts">
import { ref } from 'vue';
import { useThemeStore } from '@/stores/theme';const darkOrLight = ref(true);
const themeStore = useThemeStore();
const changeTheme = () => {darkOrLight.value = !darkOrLight.value;themeStore.changeTheme();
};
</script><style scoped lang="less">
.ThemeButton {width: 35px;height: 35px;border-radius: 50%;display: flex;justify-content: center;align-items: center;img {width: 30px;height: 30px;}background-color: #fff;
}
</style>
  1. 在全局中存储一下当前主题(piana)theme.ts
import { defineStore } from 'pinia';
import { ThemeEnums } from '@/utils/ThemeEnums';export const useThemeStore = defineStore({id: 'theme',state: () => ({theme: ThemeEnums.LIGHT_THEME}),actions: {changeTheme() {this.theme = this.theme === ThemeEnums.LIGHT_THEME ? ThemeEnums.DARK_THEME : ThemeEnums.LIGHT_THEME;}},persist: {enabled: true,storage: sessionStorage} as any
});
  1. 主题的枚举 ThemeEnums.ts
export enum ThemeEnums {// 暗黑主题DARK_THEME = 'dark',// 明亮主题LIGHT_THEME = 'light'
}
  1. 在vue的跟组件也就是APP.vue 中添加动态class
<template><div class="App AppClass" v-loading="globalLoading" :class="useThemeStore().theme"><router-view v-slot="{ Component, route }"><keep-alive :include="cacheList"><component :is="Component" /></keep-alive></router-view><TabBar class="option_menu" v-if="isShowTabBar" /></div>
</template>
  1. 定义俩套主题(dark.less light.less)别忘记在main.css 中把这俩个主题引入一下
:root {--light-background-color: #FFFFFF;--light-font-color: #333333;--light-tab-bar-shadow-color: rgba(#121621, 0.08);
}.light {background-color: var(--light-background-color);.home_content_wrapper {background-color: var(--light-background-color);.menu li span {color: var(--light-font-color);}}.tabBarClass .tabBar {box-shadow: 0 4px 12px 10px var(--light-tab-bar-shadow-color);}// 消息列表.MessageListClass {.list_wrap {background-color: var(--light-background-color);.list_item {background-color: var(--light-background-color);}}}}

light 其实就是默认原来的样式,黑暗主题涉及的可能更多是颜色的对比后,包括第三方组件的样式重写等


:root {--dark-background-color: #242424;--dark-font-color: #FFF;--dark-tab-bar-shadow-color: rgba(#d5cbcb, 0.08);--dark-item-content-shadow-color: rgba(#eeeaea, 0.12);--color: #eeeaea;
}.dark {background-color: var(--dark-background-color);.home_content_wrapper {background-color: var(--dark-background-color);.menu li span {color: var(--dark-font-color);}}.tabBarClass .tabBar {box-shadow: 0 4px 12px 10px var(--dark-tab-bar-shadow-color);}// vant 样式重置.van-cell-group {border: none;}.van-cell {background-color: var(--dark-background-color);color: var(--dark-font-color);}.van-field__label {color: var(--dark-font-color);}.van-cell:after {border-bottom: none;}.van-hairline--top-bottom:after {border: none;}.van-tabs__nav {background-color: var(--dark-background-color);}.van-tab {color: var(--dark-font-color);}.van-text-ellipsis {color: var(--dark-font-color);}.van-popup {background-color: var(--dark-background-color);}.van-cascader__title {color: var(--dark-font-color);}.van-cascader__option {color: var(--dark-font-color);}.van-field__control {color: var(--dark-font-color);}.van-checkbox__label{color: var(--dark-font-color);}// 带统计的按钮.total_content_wrapper {.van-submit-bar__text {color: var(--dark-font-color);}}.van-collapse-item__content{background-color: var(--dark-background-color);border: 1px solid var(--dark-item-content-shadow-color);.inspection_content{color: var(--dark-font-color) !important;}.van-radio__label{color: var(--dark-font-color) !important;}}.content_wrapper{border: 1px solid var(--dark-item-content-shadow-color);border-radius: 5px;}// 列表样式.item_content_wrapper {border: 1px solid var(--dark-item-content-shadow-color);box-shadow: 3px 3px 6px var(--dark-item-content-shadow-color);.title_content {color: var(--dark-font-color);}}// 消息列表.MessageListClass {.list_wrap {background-color: var(--dark-background-color);.list_item {background-color: var(--dark-background-color);border: 1px solid var(--dark-item-content-shadow-color);box-shadow: 3px 3px 6px var(--dark-item-content-shadow-color);}}}// 企业首页.statistic_content{border: 1px solid var(--dark-item-content-shadow-color);color: var(--dark-font-color);.time_bgc{background-color: var(--dark-background-color);.time{background-color: var(--dark-background-color) !important;}}}.van-cell-group {.van-cell {&:nth-child(odd) {background-color: var(--dark-background-color) !important;}:deep(.van-cell__title) {color: var(--dark-font-color) !important;}.van-cell__value {color: var(--dark-font-color) !important;}}}.company_name{color: var(--dark-font-color);}.ConfirmCheckBtnClass{background-color: var(--dark-background-color) !important;border: 1px solid var(--dark-background-color) !important;.tip_content{color: var(--dark-font-color);}}.LoadingClass{background-color: var(--dark-background-color) !important;}
}
/*重置样式*/
@import './reset.css';/*样式初始化*/
@import './base.scss';/*通用样式*/
@import "./common.css";/*主题-黑色*/
/*@import "./theme.css";*/
@import "./theme/dark.less";
@import "./theme/light.less";

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

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

相关文章

智能时代,让AI为你撰写专业应用文

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 何谓应用文&#xff1f;简单来说&#xff0c;应用文是指在日常生活中以及工作中撰写的&#xff0c;旨在传递信息、处理事务的一种文体类型。其范畴广泛&#xff0c;涵盖了诸如请假条、通知书、辞职信、检查报告、欠条、…

6.1810: Operating System Engineering 2023 <Lab7 lock: Parallelism/locking>

一、本节任务 二、要点 2.1 文件系统&#xff08;file system&#xff09; xv6 文件系统软件层次如下&#xff1a; 通过路径树我们可以找到相应的文件&#xff1a; fd&#xff08;文件描述符&#xff09;是进程用来标识其打开的文件的手段&#xff0c;每个进程有自己的文件…

SaaS模式、springboot框架医院云HIS系统源码

HIS系统作为医院信息化的核心业务系统&#xff0c;如今已成为各个医疗机构的必备品了。大到三级二级医院&#xff0c;小到社区卫生服务中心&#xff0c;门诊&#xff08;门诊管理系统也可以理解为门诊的his系统&#xff0c;只是功能简单&#xff0c;模块较少&#xff09;。随着…

010:vue结合el-table实现表格小计总计需求(summary-method)

文章目录 1. 实现效果2. 核心部分3. 完整组件代码4. 注意点 1. 实现效果 2. 核心部分 el-table 添加如下配置&#xff0c;添加 show-summary 属性&#xff0c;配置 summary-method 函数 <el-table.......show-summary:summary-method"getSummaries" >...... …

Gartner发布CPS安全2024年预测:安全形势动荡的四大向量

随着威胁形势、自动化和人工智能采用的步伐以及供应商形势不断快速发展&#xff0c;我们为安全和风险管理领导者提供了四项预测&#xff0c;以规划 2024 年及以后 CPS 安全的未来发展方向。 主要发现 随着人工智能的采用加速增加网络物理系统&#xff08; CPS&#xff09;的“智…

【Internet Protocol】ip介绍,如何组局域网实现远程桌面和文件共享

文章目录 1.何为“上网”1.1 定义1.2 为什么连了WiFi就能上网了&#xff1f; 2.ip2.1 什么是ip2.2 为什么区分广域网和局域网&#xff0c;ip的唯一性2.3 如何查看设备的ip2.4 什么叫"ping"2.5 区分是否两个ip是否在同一局域网2.5.1 最稳妥的方式&#xff1a;ip&m…

mysql group_concat函数使用

CREATE TABLE aa (id int(11) DEFAULT NULL,name varchar(50) DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb41、基本查询 SELECT * FROM aa;2、以id分组&#xff0c;把name字段的值打印在一行&#xff0c;逗号分隔(默认) select id,group_concat(name) from aa group …

精确掌控并发:漏桶算法在分布式环境下并发流量控制的设计与实现

这是《百图解码支付系统设计与实现》专栏系列文章中的第&#xff08;16&#xff09;篇&#xff0c;也是流量控制系列的第&#xff08;3&#xff09;篇。点击上方关注&#xff0c;深入了解支付系统的方方面面。 本篇重点讲清楚漏桶原理&#xff0c;在支付系统的应用场景&#x…

解决打开 json 文件中文乱码的问题

如下图&#xff0c;pycharm 打开是下面的样子 右下角的编码尝试了好久&#xff0c;依然打不开 用代码打开就成功了 import jsonwith open(./Mydata/garbage_classification.json,encodingutf8,moder) as f:data json.load(f) print(data)控制台结果&#xff1a;

2024年“华数杯”国际大学生数学建模竞赛B题思路

本题难点在于数据获取和定性定量分析&#xff0c;代码部分没有太大价值、就不更新了 •中国的电力供应和许多因素相互作用。请研究它们之间的关系&#xff0c;并预测2024年至2060年中国电力供应的发展趋势。 首先得获取数据&#xff0c;中国的宏观数据相对容易&#xff08;包括…

两数之和(Hash表)[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个整数数组nums和一个整数目标值target&#xff0c;请你在该数组中找出"和"为目标值target的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元…

C#MQTT编程07--MQTT服务器和客户端(wpf版)

1、前言 上篇完成了winform版的mqtt服务器和客户端&#xff0c;实现了订阅和发布&#xff0c;效果666&#xff0c;长这样 这节要做的wpf版&#xff0c;长这样&#xff0c;效果也是帅BBBB帅&#xff0c;wpf技术是cs程序软件的福音。 wpf的基础知识和案例项目可以看我的另一个专…

单向不带头链表的使用

单向不带头链表的使用 链表的创建&#xff1a; typedef struct LNode {SLDataType data;struct LNode* next; }LNode,*LinkList; 按位查找 LNode* GetElem(LinkList L, int i) {int j 1;LNode* p L->next;if (i < 0)return NULL;if (i 0)return L;while (p &&…

一天一个设计模式---组合模式

基本概念 组合模式是一种结构型设计模式&#xff0c;它允许客户端统一对待单个对象和对象的组合。组合模式通过将对象组织成树形结构&#xff0c;使得客户端可以一致地使用单个对象和组合对象。 主要角色&#xff1a; Component&#xff08;组件&#xff09;&#xff1a; 定…

Git Merge、Rebase 和 Squash 之间的区别

文章目录 Git MergeGit RebaseGit Squash结论 作为一名开发人员&#xff0c;您可能使用过 Git 和 GitHub&#xff0c;掌握了版本控制的要点。通常通过拉取请求将分支的更改集成到主分支中是一项常见任务。许多人的默认选择是“合并”功能。 然而&#xff0c;版本控制领域提供了…

【软件测试】学习笔记-设计一个“好的”测试用例

本篇文章重点探讨如何才能设计出一个“好的”测试用例。 什么才算是“好的”测试用例&#xff1f; 什么才是“好的”测试用例&#xff0c;这个“好”又应该体现在哪些方面。这是一个看似简单实则难以回答的问题&#xff0c;即使深入思考后&#xff0c;也很难有非常标准的答案…

C++力扣题目501--二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xf…

【Redis】非关系型数据库之Redis的增删改查

目录 一、Redis的数据类型分类 二、Redis的字符串类型string 三、Redis的列表list 四、Redis的哈希hash 五、Redis的无序集合set 六、Redis的有序集合zset 七、Redis的通用命令 一、Redis的数据类型分类 通常Redis的数据类型有五大基础类型 String&#xff08;字符串&am…

多机TCP通讯之hello world(C++)

文章目录 TCP是什么准备工作CMakeLists.txt服务端代码客户端代码参考 TCP是什么 TCP&#xff08;传输控制协议&#xff09;是一种在计算机网络中广泛使用的协议&#xff0c;它提供了可靠的、面向连接的数据传输服务。TCP 是 OSI 模型中的传输层协议&#xff0c;它确保了数据的…

idea 安装免费Ai工具 codeium

目录 概述 ide安装 使用 chat问答 自动写代码 除此外小功能 概述 这已经是我目前用的最好免费的Ai工具了&#xff0c;当然你要是有钱最好还是用点花钱的&#xff0c;比如copilot&#xff0c;他可以在idea全家桶包括vs&#xff0c;还有c/c的vs上运行&#xff0c;还贼强&am…