在大多数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) 的反色还是灰色,无法和底色区分不开。于是将反色与背景色,再做一次颜色距离判断,如果相近则直接取白色或黑色(根据该算法来判断)
参考: