A
Air官方
深色模式从加分项变成了必答题:系统级深色下,不适配的应用在用户眼里是刺眼的白块。这篇讲深色模式资源适配的工程做法。
▍两种实现路线
路线一,跟随系统主题色:应用界面用系统语义色(系统组件自动跟随——壳层界面直接受益);框架层自绘内容的颜色由应用按主题映射(框架拿到当前模式,配色表切换)。路线二,自带双套配色:应用定义浅色与深色两套资源,监听模式变化切换。实践上两者结合:壳层用系统能力,框架层自带映射表。
▍框架层的适配要点
配色表结构化:颜色按语义定义(背景、前景、强调、边框、三档层级),深浅两套值——别散落硬编码(一处一处改颜色是维护地狱,语义化后一处换全套)。图片资产双套或自适应(深色下刺眼的白底图要有深色版或反色处理——图标的深色适配最容易被漏)。混排内容的处理(WebView 内容、第三方渲染的文档——这类内容的深色是内容侧问题,应用给容器适配)。
▍模式切换的时序
运行中切换深浅色:系统发模式变化通知——应用重建或刷新界面。坑位一族:切换瞬间界面半新半旧(部分组件响应了部分没有——刷新要完整);切换时表面重建的衔接(渲染层要清旧帧重绘——残影篇的邻居问题);弹窗与对话框的同步(弹着的对话框颜色要跟)。切换的验证要在真机做(模拟器的模式切换时序与真机有差异)。
▍一个真实的坑
壳层设置颜色模式与系统模式形成循环触发(应用设深色,系统回通知,应用再设——无限递归崩在壳层,真实工程的事故记录)。防御:设置与监听的去重(模式没变不动作)、通知处理的一次性收敛。
▍验收
深浅两模式下全界面走查(菜单、弹窗、工具提示、画布内容、图标);运行中切换的瞬时状态干净;第三方渲染内容的容器适配;用户偏好独立于系统(应用内允许固定模式)。
免费无广告的安装包可以在官网下载体验。
▍两种实现路线
路线一,跟随系统主题色:应用界面用系统语义色(系统组件自动跟随——壳层界面直接受益);框架层自绘内容的颜色由应用按主题映射(框架拿到当前模式,配色表切换)。路线二,自带双套配色:应用定义浅色与深色两套资源,监听模式变化切换。实践上两者结合:壳层用系统能力,框架层自带映射表。
▍框架层的适配要点
配色表结构化:颜色按语义定义(背景、前景、强调、边框、三档层级),深浅两套值——别散落硬编码(一处一处改颜色是维护地狱,语义化后一处换全套)。图片资产双套或自适应(深色下刺眼的白底图要有深色版或反色处理——图标的深色适配最容易被漏)。混排内容的处理(WebView 内容、第三方渲染的文档——这类内容的深色是内容侧问题,应用给容器适配)。
▍模式切换的时序
运行中切换深浅色:系统发模式变化通知——应用重建或刷新界面。坑位一族:切换瞬间界面半新半旧(部分组件响应了部分没有——刷新要完整);切换时表面重建的衔接(渲染层要清旧帧重绘——残影篇的邻居问题);弹窗与对话框的同步(弹着的对话框颜色要跟)。切换的验证要在真机做(模拟器的模式切换时序与真机有差异)。
▍一个真实的坑
壳层设置颜色模式与系统模式形成循环触发(应用设深色,系统回通知,应用再设——无限递归崩在壳层,真实工程的事故记录)。防御:设置与监听的去重(模式没变不动作)、通知处理的一次性收敛。
▍验收
深浅两模式下全界面走查(菜单、弹窗、工具提示、画布内容、图标);运行中切换的瞬时状态干净;第三方渲染内容的容器适配;用户偏好独立于系统(应用内允许固定模式)。
免费无广告的安装包可以在官网下载体验。
楼主
7 天前