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

背景

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

实现方案

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