根据背景颜色的亮度调整字体的颜色

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

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

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, 这就是我解决这个问题的过程。