Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.82 KB

principle.md

File metadata and controls

36 lines (27 loc) · 1.82 KB

图文富文本内容 Dark Mode 处理原则

处理 1:带颜色节点

  • 只处理背景颜色字体颜色边框颜色字体阴影颜色,由算法统一进行转换(算法持续优化中,见如下算法思路
  • 渐变色先计算出 mix 颜色后再处理(Dark Mode 下转为纯色)
  • SVG 节点跳过(后续优化)
  • 有背景图节点跳过(见如下处理 2

注意:

  • 背景颜色、字体颜色处理前后色值需透传子节点用于子节点计算
  • 只有背景颜色无字体颜色节点需追加计算后字体颜色

处理 2:带背景图片节点

  • 图片上方存在文本,则给图片底层补 Light Mode 原背景色(保证图片上方文本的可读性)
  • SVG 节点跳过(SVG 存在动画状态,存在不可控因素)

注意:

  • 背景图处理规则影响子节点,直到子节点出现可见背景颜色(透明度需 ≥ 0.05)恢复为处理 1

算法思路:颜色转换

  • 背景颜色
    • 优先处理背景色,根据转换后的背景色再处理字体颜色
    • 高亮度灰白背景颜色(l > 40)降低亮度(感知亮度高于阈值视为白色处理,阈值:250)
    • 高感知亮度背景颜色(> 阈值)感知亮度调整为阈值(阈值:190)
    • 低感知亮度背景颜色(< 阈值)感知亮度调整为阈值(阈值:22)
  • 字体颜色边框颜色
    • 高亮字体颜色(接近白色感知亮度),不处理,保持高亮
    • 根据背景颜色计算出感知亮度差值,高于阈值不处理,低于阈值调整为阈值(阈值:65)
  • 字体阴影颜色
    • 处理方式和背景颜色一致,但不会根据转换后的字体阴影颜色去处理字体颜色

注意:

  • 背景颜色透明度加入感知亮度计算