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

背景

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

实现方案

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路由对象的参数获取产生干扰

相关推荐
Shinpei19 分钟前
如何在AI流式数据中渲染mermaid图表
前端·deepseek
快起来别睡了27 分钟前
深入浅出 Event Loop:前端工程师必须掌握的运行机制
前端·javascript
user2975258761228 分钟前
别再用关键字搜了!手搓一个Vite插件,为页面上的标签打上标记
前端·javascript·vite
野区小女王35 分钟前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
尝尝你的优乐美1 小时前
原来前端二进制数组有这么多门道
前端·javascript·面试
CF14年老兵1 小时前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
张元清1 小时前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试
Struggler2812 小时前
让ai更加精准的理解你的提示词
前端
橙某人2 小时前
📆基于Grid布局完成最精简的日期组件
前端·javascript
李剑一2 小时前
面试官:你是如何理解MVVM模型的?请你结合自己做过的项目从框架层面解释一下
前端·面试