字色自动适配主题的背景色

/ 0评 / 0

在大多数RSS阅读器中,常会出现一个问题:文章自带的背景色或字色与APP的主题背景色冲突。

例如我开发的「知微」RSS阅读器具有换肤功能,白天是正常的白底黑字,到了夜间就会切换为黑底白字。但有的微信文章,会将某行文字标为深蓝色,导致在夜间模式下与页面底色区别不开,观感极差。

那该怎么解决呢?

我调研的大部分 RSS 阅读器,都是简单粗暴的去除所有 element 的底色(background-color)和字色(color),丢失了文章想要强调的意思。

而我想尽量保留原始信息,于是采用以下方案让文章字色适配 app 的背景色:

1,去掉所有 element 自带的底色(background-color)。

如果不去除,理想情况下,最少都会有“页面底色 + element 底色 + 文字颜色”共3层颜色,系统要根据页面底色,遍历去处理子 element 的底色,再向下遍历去处理子 element 的文字颜色。

然而多数情况下,elements 十分复杂,可能多个层的 element 同时包含底色或者字色,都处理的话代价太高。再说带有底色的文章一般不多,并且增加了底色的文字,其本身大多也有特殊字色,这里去除底色,可以在步骤2中来矫正字色。

2,检查所有带有字色(color)的 element,将16进制的颜色统一转为RGB模式,根据「颜色距离」算法,判断字色与页面底色是否相近(临界值382)。

3,步骤2中与背景色相近的字色做反色处理,即反色后的 (R, G, B) = (255 - R原, 255 - G原, 255 - B原)。

4,由于步骤3的反色方案有瑕疵,灰色(127,127,127) 的反色还是灰色,无法和底色区分不开。于是将反色与背景色,再做一次颜色距离判断,如果相近则直接取白色或黑色(根据该算法来判断)

参考:

【图像处理】颜色距离

JAVA反色计算方法的改进和修正

分享一个算法,计算能在任何背景色上清晰显示的前景色

根据用户选的背景色,自动匹配一个前景色

发表评论

电子邮件地址不会被公开。 必填项已用*标注