前端如何实现更换项目主题色的功能?

1、场景

有一个换主题色的功能,如下图:
在这里插入图片描述

切换颜色后,将对页面所有部分的色值进行重新设置,符合最新的主题色。

2、实现思路

因为色值比较灵活,可以任意选取,所以最好的实现方式是,根据设置的色值,拼接相应的 style 标签代码,对样式进行覆盖。

3、实现步骤

3.1、获取深浅色

当前公司的组件库设计的时候,对于同一组件的颜色设置基本有三种:正常色、较深色(常用于hover效果)、较浅色(常用于边框),所以第一步是可以根据正常色,获取深浅色。

3.1.1、获取 HSL 色值

深浅色的获取,基本是通过设置 HSL 颜色的亮度实现,所以第一步是将任意格式的色值,转换为 HSL 格式。

3.1.1.1、将 RGB 颜色转为 HSL

因可能会存入 RGB 颜色,所以需要将 RGB 转为 HSL 。下面是代码:

// rgb to hsl
function rgbToHsl (color) {let aColor = color.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')const _R = aColor[0] / 255const _G = aColor[1] / 255const _B = aColor[2] / 255const Cmax = Math.max(_R, _G, _B)const Cmin = Math.min(_R, _G, _B)const V = Cmax - Cminlet H = 0if (V === 0) {H = 0} else if (Cmax === _R) {H = 60 * (((_G - _B) / V) % 6)} else if (Cmax === _G) {H = 60 * ((_B - _R) / V + 2)} else if (Cmax === _B) {H = 60 * ((_R - _G) / V + 4)}H = Math.floor(backCycle(H, 360))const L = numberFixed((Cmax + Cmin) / 2)const S = V === 0 ? 0 : numberFixed(V / (1 - Math.abs(2 * L - 1)))return `hsl(${H},${numberFixed(100 * S)}%,${numberFixed(100 * L)}%)`
}function numberFixed (num = 0, count = 3) {const power = Math.pow(10, count)return Math.floor(num * power) / power
}function backCycle (num, cycle) {let index = num % cycleif (index < 0) {index += cycle}return index
}
3.1.1.2、将 HEX 颜色转为 HSL

因可能会存入 HEX 颜色,所以需要将 HEX 转为 HSL 。具体步骤是,先将 HEX 转为 RGB,再将 RGB 转为 HSL

// hex 转 rgb
function hexToRgb (color) {if (color.length === 4) {let sColorNew = '#'for (let i = 1; i < 4; i += 1) {sColorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))}color = sColorNew}// 处理六位的颜色值let sColorChange = []for (let i = 1; i < 7; i += 2) {sColorChange.push(parseInt('0x' + color.slice(i, i + 2)))}return 'RGB(' + sColorChange.join(',') + ')'
}RGB 转 HSL 见上部分。
3.1.2、HSL色值调亮度

HSL 调亮度,主要是改最后一位数字的值,代码如下:

// 获取更浅或者更暗的颜色,color为主色;amt为正数时获得浅色,为负数时获得深色。
function lightenDarkenColor (color, amt) {let hColor = colorToHsl(color).replace(/(?:\(|\)|hsl|HSL)*/g, '').split(',')let H = hColor[0]let S = getPercentNumber(hColor[1])let L = getPercentNumber(hColor[2]) + amt / 100L = L > 1 ? 0.98 : Lreturn `hsl(${H},${numberFixed(100 * S)}%,${numberFixed(100 * L)}%)`
}// 获取百分数的数值
function getPercentNumber (numberStr) {numberStr += ''if (numberStr.indexOf('%') > -1) {return parseFloat(numberStr) / 100} else {return parseFloat(numberStr)}
}

3.2、生成 style 代码

根据上面生成的深浅色,拼接 style 代码,对组件库和项目的色值进行覆盖,需要注意组件库的代码和项目中的代码要分开。
代码生成示例如下:

// 顶部导航的换肤 class
export let headerSkin = ({ skinColor, skinColorDarken, skinColorLighten } = {}) => {return `#skin .a-n-menu-primary ,#skin .a-n-menu-submenu .a-n-menu-submenu .a-n-menu .a-n-menu-item-active:not(.a-n-menu-submenu):before{background: ${skinColor};}#skin .a-n-menu-horizontal .a-n-menu-submenu:hover,#skin .a-n-menu-horizontal .a-n-menu-submenu:active,#skin .a-n-menu-horizontal .a-n-menu-item:hover,#skin .a-n-menu-horizontal .a-n-menu-item-active {background: ${skinColorDarken};}#skin .a-n-menu-vertical .a-n-menu-submenu .a-n-menu-item-selected>span.slotItem{color: ${skinColor};}#skin .a-n-menu-submenu {.a-select-dropdown {.a-n-menu-item:hover{background: ${skinColorLighten}}}}#skin .aw-header .icon-container-right:hover,#skin .aw-header .icon-container:hover {background: ${skinColorDarken};}`
}

3.3、将 style 放到 head 中,完成主题色的替换

let css = 上面生成的style代码。
var head = document.getElementsByTagName('head')[0]
skinStyle = document.createElement('style')
skinStyle.innerHTML = css
head.appendChild(skinStyle)

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

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

相关文章

全面整理人工智能(AI)学习路线图及资源推荐

在人工智能&#xff08;AI&#xff09;飞速发展的今天&#xff0c;掌握AI技术已经成为了许多高校研究者和职场人士的必备技能。从深度学习到强化学习&#xff0c;从大模型训练到实际应用&#xff0c;AI技术的广度和深度不断拓展。作为一名AI学习者&#xff0c;面对浩瀚的知识海…

递归方法清空多维数组中的null元素(对象)

源码 //【递归】说明&#xff1a;递归方法清空多维数组中的null元素&#xff08;对象&#xff09; let clearNullElementsInArray (arr) > {return (arr || []).filter(v > {if (v null) {return false;} else {if (v.children) {v.children clearNullElementsInArra…

【C语言】Linux 飞翔的小鸟

【C语言】Linux 飞翔的小鸟 零、环境部署 安装Ncurses库 sudo apt-get install libncurses5-dev壹、编写代码 代码如下&#xff1a; bird.c #include<stdio.h> #include<time.h> #include<stdlib.h> #include<signal.h> #include<curses.h>…

科普文:Linux目录详解

在 Linux/Unix 操作系统中&#xff0c;一切都是文件&#xff0c;甚至目录也是文件&#xff0c;文件是文件&#xff0c;鼠标、键盘、打印机等设备也是文件。 这篇文章&#xff0c;我们将一起学习 Linux 中的目录结构及文件。 Linux 的文件类型 Linux系统中的文件系统&#xf…

【初阶数据结构】11.排序(2)

文章目录 2.3 交换排序2.3.1 冒泡排序2.3.2 快速排序2.3.2.1 hoare版本2.3.2.2 挖坑法2.3.2.3 lomuto前后指针2.3.2.4 非递归版本 2.4 归并排序2.5 测试代码&#xff1a;排序性能对比2.6 非比较排序2.6.1 计数排序 3.排序算法复杂度及稳定性分析 2.3 交换排序 交换排序基本思想…

【包邮送书】码农职场:IT人求职就业手册

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

遗传算法与深度学习实战——进化深度学习

遗传算法与深度学习实战——进化深度学习 0. 前言1. 进化深度学习1.1 进化深度学习简介1.2 进化计算简介 2. 进化深度学习应用场景3. 深度学习优化3.1 优化网络体系结构 4. 通过自动机器学习进行优化4.1 自动机器学习简介4.2 AutoML 工具 5. 进化深度学习应用5.1 模型选择&…

鸿蒙开发——axios封装请求、拦截器

描述&#xff1a;接口用的是PHP&#xff0c;框架TP5 源码地址 链接&#xff1a;https://pan.quark.cn/s/a610610ca406 提取码&#xff1a;rbYX 请求登录 HttpUtil HttpApi 使用方法

Qt基础 | 主机信息查询 | QHostInfo的介绍和使用 | QNetworkInterface的介绍和使用

文章目录 一、Qt 网络模块介绍二、主机信息查询1.QHostlnfo 和 QNetworkInterface 类2.QHostlnfo 的使用2.1 获取本机主机名和 IP 地址2.2 查找主机的地址信息 3.QNetworkInterface 的使用 Qt 网络模块&#xff1a; Qt基础 | 主机信息查询 | QHostInfo的介绍和使用 | QNetworkI…

常见的jmeter面试题及答案

1、解释什么是JMeter? JMeter是一款Java开源工具&#xff0c; 用于性能负载测试。它旨在分析和衡量Web应用程序和各种服务的性能和负载功能行为。 2、说明JMeter的工作原理? JMeter就像一群将请求发送到目标服务器的用户-样。它收集来自目标服务器的响应以及其他统计数据&…

python爬虫【3】—— 爬虫反反爬

一、常见的反爬手段和解决方法 二、splash 介绍与安装 三、验证码识别 图片验证码的处理方案 手动输入(input) 这种方法仅限于登录一次就可持续使用的情况图像识别引擎解析 使用光学识别引擎处理图片中的数据&#xff0c;目前常用于图片数据提取&#xff0c;较少用于验证码…

彻底搞懂jdk1.8中的haspMap原理(源码解析+ 对比jdk1.7)

彻底搞懂jdk1.8中的haspMap原理&#xff08;源码解析 对比jdk1.7&#xff09;_jdk1.8 hashmap效果演示-CSDN博客文章浏览阅读484次。前言&#xff1a;本博客只对jdk1.7中的hashMap进行文字性的说明&#xff0c;源码的说明只针对jdk1.8&#xff0c;因为现在开发多数都是jdk1.8.一…

【简单图解 最强计网八股】HTTP 和 HTTPS 的区别

HTTP&#xff08;HyperText Transfer Protocol 超文本传输协议&#xff09; HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff0c;超文本传输安全协议&#xff09; 通过 传输内容加密 和 身份认证 保证了传输过程的安全性 协议传输内容加密身份认证响应效率端口号…

IP Fabric三层路由

IP Fabric指的是在IP网络基础上建立起来的Overlay隧道技术。即为基于胖树的SpineLeaf拓扑结构的IP Fabric组网图。 在这种组网方式中&#xff0c;任何两台服务器间的通信不超过3台设备&#xff0c;每个Spine和Leaf节点全互连&#xff0c;可以方便地通过扩展Spine节点来实现网络…

Orcale(备份导入导出)

1.备份恢复 1.1.备份定义 备份就是把数据库复制到转储设备的过程。其中&#xff0c;转储设备是指用于放置数据库副本的磁带或磁盘。通常也将存放于转储设备中的数据库的副本称为原数据库的备份或转储。备份是一份数据副本 1.2.备份分类 从物理与逻辑的角度来分类&#xff1a…

在docker中安装MongoDB 5.0+

文章目录 1、查看物理机是否支持avx指令集&#xff1a;安装资料中的cpu-z_2.10-cn.exe&#xff0c;并打开2、查看虚拟机是否支持avx指令集&#xff1a;3、创建目录4、使用Docker来运行一个MongoDB数据库实例5、进入容器6、查看当前db版本7、查看当前db的链接机器地址8、帮助指令…

浮点数的二进制表示

浮点数的二进制表示 浮点数在C/C中对应 float 和 double 类型&#xff0c;我们有必要知道浮点数在计算机中实际存储方式。 IEEE754规定&#xff1a; 单精度浮点数字长32位&#xff0c;尾数长度23&#xff0c;指数长度8,指数偏移量127&#xff1b;双精度浮点数字长64位&#xf…

达梦数据库DPI 实现两个数据库数据互通

链接字符串是目标访问链接 目标访问用户名 口令实现 31 里访问33库的数据 如果在31上建立视图访问33的某个表 AS SELECT SZZJ.sys_user.id FROM SZZJ.sys_userszzj31_szzj33;

研0 冲刺算法竞赛 day25 P1223 排队接水

P1223 排队接水 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 考点&#xff1a;贪心算法 思路&#xff1a;很简单&#xff0c;快的先接水即可&#xff0c;要注意重复项 代码: #include<iostream> #include<algorithm> using namespace std;int arr[1000005];…

C语言进阶 10. 字符串

C语言进阶 10. 字符串 文章目录 C语言进阶 10. 字符串10.1. 字符串10.2. 字符串变量10.3. 字符串输入输出10.4. 字符串数组10.5. 单字符输入输出10.6. 字符串函数strlen()10.7. 字符串函数strc()10.8. 字符串函数strcpy()10.9. 字符串搜索函数10.10. PAT10-0. 说反话 (20)10-1.…