根据背景的颜色调整字体的颜色是我最近在项目中遇到的一个需求,这里将代码贴出来,供以后查阅。也希望对遇到同样需求的人有帮助。

这里的需求是:整个项目中的所有页面都有一个背景色, 这个背景色是在专门的配置页面统一配置的,当在配置页面设置好颜色后,整个项目中的背景色随之改变,同时,各个页面头部,底部的一些文字颜色随着背景的亮度,对应变成黑色或者白色。

step1: 遇到这么个需求,我首先去搜索了计算颜色亮度的函数:

 let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;

step2: 由于,我们项目里存的都是16进制的颜色,所以需要将16进制的颜色转换成rgb表示。

const hexToRgb = (hexColor) => {
    return parseInt(hexColor, 16).toString();
}

step3: 根据16进制颜色值,计算色彩的亮度。

let brightnessOfColor = (colorHexdecimalValue) => {
    let useColorValue = colorHexdecimalValue.slice(1);
    let rColor = useColorValue.slice(0, 2);
    let gColor = useColorValue.slice(2, 4);
    let bColor = useColorValue.slice(4);

    let rColorValue = hexToRgb(rColor);
    let gColorValue = hexToRgb(gColor);
    let bColorValue = hexToRgb(bColor);

    let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
    return lightness;
}

step4: 根据计算,颜色的色彩亮度区间是0~255,这里我取了一个中间值作为文字颜色的显示的拐点。

decideTxtColor = (colorHexdecimal) => {
    return brightnessOfColor(colorHexdecimal) < 128;
}

所以,当背景色的亮度 < 128时,文字就应该为白色,反之为黑色。

const IsWhiteFooter = decideTxtColor(window.themeColor);

接着将IsWhiteFooter用到标签的style上即可。

OK, 这就是我解决这个问题的过程。


qinqinlv
31 声望1 粉丝

one guy who wants to grow