记录一次主题色自动适应方案

背景

随着前端越来越多的页面嵌入到不同平台,或者同一个页面嵌入到不同的平台,但平台的主题色是不相同的,因此需要实现页面主题色自动适应父级框架

实现方案

1.qiankun框架

开发环境:由于没有做到严格的样式隔离,父项目定义的变量和样式会被子项目获取到,所以阴差阳错的导致子页面会和父框架主题色相同

生产环境:会执行严格的样式隔离,所以默认子页面不会继承到父框架的主题配置

2.iframe框架

需要嵌入的子页面,sso配置时通过传参themeColor,即可实现子页面主题的切换,如:http://127.0.0.1:8886/cop/page/#/index?themeColor=ff0000

因此我们主要关注子页面内的颜色处理

1.themeUtils.js

根据element-plus的颜色变量,自己实现一套颜色逐级淡化和颜色逐级加深的颜色算法工具,覆盖element-plus的颜色变量

首要要知道element-plus有哪些主题颜色变量

类型上有primary,success,warning,danger,error,info六种

深浅有两种:light,dark

深浅级别有六种,light有 [3,5,7,8,9],dark只有2

第一个版本我们只先对primary类型进行适配改造

ini 复制代码
const HexToRgb = (defaultStr) => {
    let str = defaultStr.replace('#', '');
    let hxs = str.match(/../g);
    for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
    return hxs;
};
// rgb颜色转hex颜色
const RgbToHex = (a, b, c) => {
    let hexs = [a.toString(16), b.toString(16), c.toString(16)];
    for (let i = 0; i < 3; i++) {
        if (hexs[i].length == 1) hexs[i] = '0' + hexs[i];
    }
    return '#' + hexs.join('');
};
// 加深
const darken = (color, level) => {
    let rgbc = HexToRgb(color);
    for (let i = 0; i < 3; i++) {
        rgbc[i] = Math.floor(rgbc[i] * (1 - level));
    }
 
    return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
};
// 变淡
const lighten = (color, level) => {
    let rgbc = HexToRgb(color);
    for (let i = 0; i < 3; i++) {
        rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    }
    return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
};
 
const setPropertyLightColor = (varName, color, level = 0) => {
    document.body.style.setProperty(varName, lighten(color, level / 10));
 
const setPropertyDarkenColor = (varName, color, level = 1) => {
    document.body.style.setProperty(varName, darken(color, level / 10));
 
const themeColorGradient = (varName, themeColor = '409eff', themeLevel = [3, 5, 7, 8, 9]) => {
    themeLevel.forEach((level) => {
        setPropertyLightColor(varName.replace('#level#', level), themeColor, level);
    });
};
 
// 默认为蓝色#1f67ff
export const setThemeColor = (color = '#1f67ff') => {
    setPropertyLightColor('--el-color-primary', color);
    setPropertyDarkenColor('--el-color-primary-dark-2', color);
    themeColorGradient(`--el-color-primary-light-#level#`, color);
};

2.router.js

javascript 复制代码
import { setThemeColor } from '@/utils/themeUtils.js'; 


router.beforeEach(async (to, from, next) => {
    console.log('====router before ========');
    console.log(to, from);
 
    // 如果不是作为qiankun子应用运行,需要设置主题色
    // 设置新的CSS变量值
    if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
        if (to.query.themeColor) {
            setThemeColor(`#${to.query.themeColor}`);
            const { setColor } = useUserStore();
            setColor(`#${to.query.themeColor}`);
        }
    }
 
    // 跳转前的url有颜色主题,但跳转后的url没有颜色主题,就带上参数
    if (from.query.themeColor && !to.query.themeColor) {
        let newTo = { ...to };
        newTo.query.themeColor = from.query.themeColor;
        next(newTo);
    } else {
        next();
    }
});

变量优先级说明

1.子项目默认在body下写入一套和父框架一样的变量配置

2.如果url中携带themeColor参数,会在body下再写入一次通过自定义算法生成后的颜色变量,覆盖原来在body下的颜色

3.如果需要单独使用变量定制某个颜色,在body下一级的层级添加自定义的颜色变量即可

即 app下变量 > themeColor > body默认变量

效果展示

注意:

a.只能用hex颜色

b.url参数不要带#号,会对vue-router路由对象的参数获取产生干扰

相关推荐
花落文心1 小时前
使用 html2canvas + jspdf 实现页面元素下载为pdf文件
前端·javascript·pdf
掘金安东尼1 小时前
🚀 6 行 HTML,让应用瞬间“起飞”:Speculation Rules API 全解析
前端·api·浏览器
望获linux2 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
乘乘凉2 小时前
Python中函数的闭包和装饰器
前端·数据库·python
Fantastic_sj3 小时前
部分CSS笔试题讲解
前端·css
雷达学弱狗5 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人6 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML7 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
烛阴9 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者10 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js