ROMA-iOS 适配深色模式总结
一、背景
深色模式在低光环境下（如夜间使用）可以显著减少屏幕发出的蓝光，降低眼睛疲劳，减轻视觉压力。深色背景配合浅色文字能提供更好的对比度和可读性，减少眩光，让内容更易于阅读。深色模式还可以显著节省电量，延长设备的电池续航时间。随着深色模式的普及，越来越多的用户习惯并偏好深色界面。
京东金融 App 自 8.0.20 版本支持深色模式，可在设置->通用->深色模式中打开深色模式的设置页面，选择是否启用深色模式。ROMA 框架也在此版本全面支持深色模式的设置，本文详细介绍跨端框架 ROMA 适配深色模式的过程。
二、ROMA 配置和使用
APP 深色模式的设置，提供如下选择，可以强制设置普通模式（浅色模式）、深色模式和跟随系统。可以看到在将 App 切换为深色模式时，页面视图由普通模式切换深色模式时原有视图并未重建，视图模式的转换也非常顺畅，体验很好。
1.视图的显示模式设置
ROMA 针对所有标签（包括页面）提供 theme-mode 属性，表示当前视图在什么模式下显示。提供以下三种模式可选：
1：表示强制浅色模式 2：表示强制深色模式 3：表示跟随模式（节点设置跟随，表示跟随父节点。页面设置跟随，表示跟随系统。若未设置：页面为 1，标签 3）
如下示例代码，设置当前页面 theme-mode=3 表示跟随 window（window 设置跟随系统），div 标签设置 theme-mode="1" 表示强制浅色，text 标签未设置，则默认为 theme-mode="3"，跟随父节点 div，因次 text 标签也是浅色。
通过设置 theme-mode 属性，业务可以灵活的定制页面和视图的显示模式。既可实现整体视图跟随父节点的模式，也可针对特殊节点强制深色或者浅色显示，更大程度的满足业务在不同场景下的需求，具体效果可参考下图，其中数字表示当前节点对应的 theme-mode 的值。
2.视图的颜色设置
理想情况下业务可以做到零修改就能完成深色模式的适配，前提是 App 需要高度依赖一套完整的、规范的颜色映射表（普通模式下的颜色 color 要有对应的深色模式下的颜色值 color-dark，没有则不映射），且设计师要按照映射表上的颜色来设计 UI 设计稿。这样在模式切换时就可以自动调整视图的颜色。
配置表的颜色映射流程可参考下图：
但业务场景复杂多样，为了兼容更多的业务场景，ROMA 也向所有视图提供了针对深色模式的特定样式配置 xxx-dark ，来定制深色模式下的 UI 样式。如下示例代码，提供了 background-color-dark 字段可以配置深色模式下视图的背景色，color-dark 字段设置深色模式下文本的颜色, src-dark 字段设置深色模式下图片的资源。
三、视图模式切换原理分析
ROMA 只提供了简单配置就可以让业务适配视图在深色模式的显示，极大简化了业务的适配工作，其实 App 切换深色模式的处理流程涉及视图层级的方方面面，下面以 iOS 端为例，着重从视图层级的变化上介绍模式切换所触发的整个流程。
1.UITraitEnvironment 协议详解
UITraitEnvironment 是 iOS 中一个基础协议，各类视图和控制器都已实现了这个协议，用于监听和处理界面环境特征的变化。它是 iOS 自适应布局和外观系统的核心组成部分，使应用能够响应各种环境变化，如深浅模式切换、设备旋转或者尺寸类别变化。
在 iOS17 之后推荐使用 UITraitChangeObservable 协议，可更精细定制要监控的特征值，并将新旧特征值都封装到 hander 中处理，使用起来更方便。
2.系统特征值改变对各层级视图的影响
iOS 的核心类 UIScreen、UIWindow、UIViewController、UIView 等都实现了 UITraitEnvironment 协议，特征集合通过视图层次结构自上而下传递：
1.系统级特征由 UIScreen 提供
2.UIWindow 从 UIScreen 继承特征
3.根视图控制器从 UIWindow 继承特征
4.子视图控制器从父视图控制器继承特征
5.视图从其视图控制器继承特征
6.子视图从父视图继承特征
7.layer 层监听对应视图层的特征来调整自身的特征
以下展示系统显示模式由浅色切换为深色时各层级视图特征值的变化过程。
3.视图的颜色设置
如果是视图的直接颜色属性，比如文本颜色 textColor,视图的背景色 backgroundColor 等，可以通过 DynamicColors 直接设置，这样在视图模式发生变化的时候，会自动获取对应模式的颜色值。
4.视图的其他设置
对于 layer 层颜色、图片资源变化、lottie 的资源切换等，可以向 view 层注册状态变更的事件回调，在视图的显示特征的发生变化时，调整视图的显示。如下示例在监测到 view 的模式发生变化时，调整图层的边框颜色。
四、总结
ROMA 作为一个现代化的跨端框架，深色模式的适配不仅是一项功能，更是我们对用户体验、设备兼容性和技术趋势的全面考量。我们相信，这一更新将为开发者提供更大的灵活性，并最终为用户带来更加优质的产品体验。同时，在深色模式开发的过程中，我们也梳理出多主题切换的实现方案，如有需要，可快速完成多主题的适配。
版权声明: 本文为 InfoQ 作者【京东科技开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/4cc75a686d6de256ab096ca12】。文章转载请联系作者。
拥抱技术，与开发者携手创造未来！ 2018-11-20 加入
我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩
评论