背景
随着前端越来越多的页面嵌入到不同平台,或者同一个页面嵌入到不同的平台,但平台的主题色是不相同的,因此需要实现页面主题色自动适应父级框架
实现方案
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路由对象的参数获取产生干扰