前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

前言
提示:使用 css/less 动态更换主题色(换肤功能),方法共通,不限制技术栈:

其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求,这时候就需要通过动态更改主题色来实现预期的效果;

一、CSS中原生变量“--”和var()
示例:开始之前先稍微了解一下变量“--”和var(),在动态改变主题色中会经常用到这两个变量

@表示我们定义的的变量名称

css中原生的变量定义语法是:--@
例如定义一个边框颜色变量: --border-color: #D9EEE2;

css中变量使用语法是:var(--@)
例如使用定义的边框颜色变量:border: 0.1rem solid var(--border-color);

二、使用步骤
1、自定义样式变量,定义css方法(可以定义多个css样式)

要注意的是不管定义了几个主题色,都要确保定义的变量名保持一致。

// theme.less/**这里为我们自定义主题色,可以根据自己的需求定义多组样式*
*/// 主题类型定义
:root {// 背景色--bg-color: #D9EEE2;--border-color: #D9EEE2;// 很多图标、border都用这个颜色--icon-color: #108372;// 按钮背景色--button-bg-color: var(--dominant-color);// 选中字体和图表颜色--active-font-color: #037181;// hover字体和图表颜色--hover-font-color: var(--dominant-color);// logo--logo: url('你的图片路径')  no-repeat center center;.........
}/* 这里假设为我们自定义的主题  */
:root[theme = 'defined'] {// 背景色--bg-color: pink;--border-color: pink;// 很多图标、border都用这个颜色--icon-color: pink;// 按钮背景色--button-bg-color: pink;// 选中字体和图表颜色--active-font-color: pink;// hover字体和图表颜色--hover-font-color: var(--dominant-color);// logo--logo: url('你的图片路径')  no-repeat center center;.........
}

2、使用已定义的变量

使用其实很简单,只要根据主题色动态改变的地方通过var()引用已经定义的样式变量就可以; 

 

/**  这里举个简单的例子 child.less(这里就是项目中引用的css文件)*/.root{.main{background:var(--bg-color);border:1px solid var(--border-color);...}...
}

3、用户操作,切换对应的主题

通过设置属性自动匹配选择颜色主题,会修改对应的样式;

1)、首先你跟据需求在特定位置定义好主题切换功能键;

这里是定义的结构体,仅作参考(你可以根据自己项目的框架使用对应的组件都是ok的,没啥特殊要求)

    <div className={styles.root}><Dropdown overlay={menu} placement="bottomCenter"><div><i className="iconfont icon-them" /><span>主题</span></div></Dropdown></div>

 这里是菜单的主题曲部分,切换全靠它了;

// 这里的items就是你要定义的主题的种类,没有key代表一个主题色标识const menu = (<MenuselectableselectedKeys={theme}onClick={setThemeFun}items={[{label: '默认色',key: 'default',},{label: '自定义',key: 'defined',},]}/>);

2)、然后通过对应的方法设置对应的的主题色;

 
/*主题色选择后的回调*/
const setThemeFun =(e)=>{
// 这里其实就是将主题表示存在state里,在menu中展示,  默认 const [theme, setTheme] = useState(['default']);setTheme([e.key]); //通过修改属性,会用对应的样式document.documentElement.setAttribute('theme', e.key);
}

这里建议把切换主题色封装到一个单独的组件,便于维护处理
切记:初始化时要个给一个默认值,这里就不做过多赘述了
4、特殊处理
1)本地存取主题色

其实用户没有的要求的话,一般都是主题的存储本地,可以通过localStorage实现

// 在你需要的时候存在来
localStorage.setItem('theme', e.key);//特定情况取出来使用就可以了
const defaultTheme = localStorage.getItem('theme');if (defaultTheme) {setTheme([defaultTheme]);document.documentElement.setAttribute('theme', defaultTheme);} 

 

注:本地存储小科普

生存期
localStorage理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。但需要注意的是,在移动设备上的浏览器或各Native App用到的WebView里,localStorage都是不可靠的,可能会因为各种原因(比如说退出App、网络切换、内存不足等原因)被清空。
sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。由于sessionStorage的生存期太短,因此应用场景很有限,但从另一方面来看,不容易出现异常情况,比较可靠。


2)接口存取主题色

这个就需要跟产品和后端确认好方案,是否绑定用户或者设备,通过对应的接口实现主题色存取,原理和上述本地存储大差不差,具体根据需求走就行了

总结
以上是使用纯CSS控件切换主题颜色或通过单击更改背景颜色,这个个人感觉可能前期样式定义稍微繁琐一点,其他都还可,相对来说易上手方便操作,关键是简单,不过要注意以下几点:
1、需求确定好是否需要主题色切换;
2、需要的话对一些字体图标的定义要跟ui和pd沟通好,构建好对应的iconfont工程,方便使用,因为你要清楚如果单纯使用图片,那切换主题色,变量定义就会很繁琐,一句话怎么方便怎么好维护就怎么来;
3、一定要确保主题的定义的变量保持一致……
……

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

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

相关文章

搜索引擎trick:成为搜索高手的秘籍

诸神缄默不语-个人CSDN博文目录 文章目录 1. 搜索指令1.1 "完全匹配搜索"1.2 -1.3 site1.4 filetype1.5 * 模糊搜索1.6 intitle1.7 inurl1.8 related1.9 inanchor 2. 组合搜索技巧3. 搜索引擎的选择4. 使用高级搜索功能4.1 时间限定搜索4.2 语言限定搜索4.3 使用搜索…

技术为业务赋能:深度剖析开发与业务的紧密结合

技术为业务赋能&#xff1a;深度剖析开发与业务的紧密结合 很多做开发的同学有一种认知&#xff0c;技术最牛&#xff0c;进而忽视了对业务的理解和积累&#xff0c;眼里认为技术和游戏一样&#xff0c;有着层出不穷的新技术&#xff0c;更新迭代的非常快&#xff0c;而业务方…

Flask笔记二之blueprint和session介绍

本文首发于公众号&#xff1a;Hunter后端 原文链接&#xff1a;Flask笔记二之blueprint和session介绍 前面我们使用 app.route() 的方式实现了一个简单的接口&#xff0c;用于访问系统接口&#xff0c;接下来介绍一下如何使用 Blueprint 来实现路由的分组以及 Flask 中 session…

Modbus转Profinet网关在大型自动化仓储项目应用案例

Modbus转Profinet网关在大型自动化仓储项目应用案例 在自动化仓储项目中&#xff0c;Modbus是一种常见的通信协议&#xff0c;用于连接各种设备&#xff0c;例如传感器、PLC和人机界面。然而&#xff0c;Modbus协议只支持串行通信&#xff0c;并且数据传输速度较慢。为了提高通…

【C++历练之路】stack||queue||底层原理知多少

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; C标准模板库&#xff08;Standard Template Library&#xff0c;STL&#xff09;是C语言的一个重要组成部分&#xff0c;提供了一组通用的数据结构和算法&#xff0c;以便开发人员能够高…

计算机算法分析与设计(24)---分支限界章节复习

文章目录 一、分支界限法介绍二、旅行商问题应用三、装载问题应用3.1 问题介绍与分析3.2 例题 四、0-1背包问题应用4.1 问题介绍与分析4.2 例题 一、分支界限法介绍 二、旅行商问题应用 三、装载问题应用 3.1 问题介绍与分析 3.2 例题 四、0-1背包问题应用 4.1 问题介绍与分析…

java 数据库 查询 select 2

Day2 组函数 以组为操作单位&#xff0c;一组数据得到一个结果。 在没有手动分组的前提下&#xff0c;整张表默认为一组数据 max(列名)&#xff1a;获取最大值 min(列名)&#xff1a;获取最小值 sum(列名)&#xff1a;获取总和 avg(列名)&#xff1a;获取平均值 count(列…

TensorFlow实战教程(十九)-Keras搭建循环神经网络分类案例及RNN原理详解

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章分享了卷积神经网络CNN原理,并通过Keras编写CNN实现了MNIST分类学习案例。这篇文章将详细讲解循环神经网络RNN的原理知识,并采用Keras实现手写数字识别的RNN分类案例及可视化呈现。基础性文…

【C++进阶之路】第十篇:C++的类型转换

文章目录 1.C语言中的类型转换2.为什么C需要四种类型转换3.C强制类型转换3.1 static_cast3.2 reinterpret_cast3.3 const_cast3.4 dynamic_cast 4.RTTI&#xff08;了解&#xff09;5.常见面试题 1.C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&…

CSDN专栏设置

文章目录 一、规则1.1、专栏数量与等级关联1.2、等级与积分关联1.3、积分1.3.1、积分获取1.3.2、积分被扣 二、配置2.1、入口2.2、新建2.2.1、一级专栏2.2.2、二级专栏 2.3、快捷编辑2.4、拖拽 一、规则 写了一阵子CSDN博客后&#xff0c;发现自己新增专栏的时候提示不能再新增…

oracle 杀掉正在“执行”的SQL

1、 找到正在执行的 SQL&#xff0c;或者造成等待事件的SQL 的 sid 和 serial#&#xff0c;通过这两个值确定一个 session SELECT b.username 用户名,b.sid, session_idb.serial#, 串口号spid 操作系统ID,paddr, session对应的进程地址&#xff0c;sql_text 正…

【python笔记】客户运营 - cohort分析

一、数据 本文涉及数据下载链接。 二、数据预处理 2.1 读取数据 import pandas as pddf pd.read_csv(your_path/Year 2010-2011.csv, encodingISO-8859-1) df.head()2.2 检查数据 检查空值情况 df.isna().sum() # 结果 Invoice 0 StockCode 0 De…

二叉树的层序遍历

1 问题 二叉树是计算机科学中非常基础且重要的数据结构&#xff0c;它由节点和连接它们的边组成。其中一个节点为根节点&#xff0c;除此之外其他的节点都有唯一一个父节点。层序遍历是二叉树遍历的一种&#xff0c;也是最常见的一种遍历方法。它是按照二叉树的深度&#xff0c…

大数据-之LibrA数据库系统告警处理(ALM-25005 Nscd服务异常)

告警解释 系统每60秒周期性检测nscd服务的状态&#xff0c;如果连续4次&#xff08;3分钟&#xff09;查询不到nscd进程或者无法获取ldapserver中的用户时&#xff0c;产生该告警。 当进程恢复且可以获取ldapserver中的用户时&#xff0c;告警恢复。 告警属性 告警ID 告警级…

visionOS空间计算实战开发教程Day 2 使用RealityKit显示3D素材

我们在​​Day1​​中学习了如何创建一个visionOS应用&#xff0c;但在第一个Demo应用中我们的界面内容还是2D的&#xff0c;看起来和其它应用并没有什么区别。接下来我们先学习如何展示3D素材&#xff0c;苹果为方便开发人员&#xff0c;推出了RealityKit&#xff0c;接下来看…

Vue 3实战:打造交互丰富的任务管理应用

Vue 3实战&#xff1a;打造交互丰富的任务管理应用 前言搭建Vue 3项目步骤 1: 安装Vue CLI 3步骤 2: 创建Vue 3项目步骤 3: 进入项目目录步骤 4: 启动项目步骤 5: 查看项目结构 组件设计与复用1. **组件的职责单一化:**2. **Props传递:**3. **插槽&#xff08;Slots&#xff09…

MongoDB——文档增删改查命令使用

MongoDB 文档增删改查 命令操作描述db.collection.insert() db.collection.insert()将单个文档或多个文档插入到集合中db.collection.insertOne()插入文档&#xff0c;3.2 版中的新功能db.collection.insertMany()插入多个文档,3.2 版中的新功能db.collection.update更新或替…

目标检测YOLO实战应用案例100讲-基于改进YOLOv5s的道路目标检测(续)

目录 3.3融合注意力模块 3.3.1注意力机制 3.3.2 SENet 3.3.3 CBAM 3.3.4ECA 3.3.5改进后的算法网络结构

维格表项目进度同步到钉钉群

企业越来越依赖项目管理工具&#xff0c;以确保项目按时完成、成本控制得当、并实现预期的业务目标。但随着项目变得更加复杂&#xff0c;项目经理和团队需要更高效的方法来跟踪和传达项目进度&#xff0c;以确保团队内部保持一致的理解。 传统的项目管理方法&#xff0c;可能缺…

『亚马逊云科技产品测评』活动征文|搭建Squoosh图片在线压缩工具

搭建Squoosh图片在线压缩工具 前言一、Squoosh是什么&#xff1f;二、准备一台Lightsail实例1.进入控制台2.创建实例3.开放端口4.部署Squoosh5.预览 三、搭建反向代理1. 安装宝塔2. 配置反向代理3. 预览代理效果 提示&#xff1a;授权声明&#xff1a;本篇文章授权活动官方亚马…