根据背景的颜色调整字体的颜色是我最近在项目中遇到的一个需求,这里将代码贴出来,供以后查阅。也希望对遇到同样需求的人有帮助。
这里的需求是:整个项目中的所有页面都有一个背景色, 这个背景色是在专门的配置页面统一配置的,当在配置页面设置好颜色后,整个项目中的背景色随之改变,同时,各个页面头部,底部的一些文字颜色随着背景的亮度,对应变成黑色或者白色。
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, 这就是我解决这个问题的过程。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。