在本文中，我们会介绍优酷App的Weex和H5页面是如何尽可能复用Native端的实现方案，实现暗黑模式的。

一、适配原理

对于Weex和H5页面的暗黑模式支持，我们考虑了几种方案。

第一种方案，只提供视觉模式查询能力，由具体页面的开发同学来控制效果；

第二种方案，建立JavaScript版本的公共资源库和设计标准化体系；

第一种方案过于简单，难以对最终页面呈现结果做统一管控；

第二方案又比较重，需要较长的时间成本。

我们的最终的方案是：Native/Weex/H5具体页面的开发都统一按照视觉标准化定义的DesignToken进行开发，这样同一套设计体系可以复用到不同的渲染方式。Native容器在加载Weex或H5页面时，将当前的色值表传给JavaScript侧;JavaScript侧不用关心当前所处的视觉模式，只需要读取色值表并设置到页面组件。

Weex/H5页面实现暗黑模式的架构图:

Weex/H5的实际使用场景一般是作为活动的承载页，内容的落地页，和跨应用业务的交互页。但不论是哪种，都是嵌入在整个原生页面交互链路上的。所以我们把Native当作是Weex/H5容器的运行环境，Native触发动态页面的渲染时，我们会将色板从色彩管理器中取出，传递给JavaScript侧，然后借由JavaScript侧影响最终的视觉效果呈现。

1. Weex页面的适配

Weex渲染流程图：

2. H5页面的适配

H5 渲染流程图:

色彩管理器向JS传递的色板数据

{
    "cb_1":"rgba(36,165,255,0)",
    "cb_2":"rgba(0,179,250,0)",
    "cb_3":"rgba(25,69,121,0)",
    "cd_1":"rgba(0,0,0,1)",
    "cg_1":"rgba(28,32,41,0)",
    ......
    "ykn_belt":"rgba(37,37,43,0)",
    "ykn_blackNavigationBar":"rgba(29,29,33,0)",
    "ykn_elevatedPrimaryBackground":"rgba(37,37,43,0)",
    "ykn_elevatedPrimaryGroupedBackground":"rgba(37,37,43,0)",
    "ykn_elevatedSecondaryBackground":"rgba(37,37,43,0)",
    "ykn_elevatedSecondaryGroupedBackground":"rgba(51,51,55,0)",
    "ykn_elevatedTertiaryBackground":"rgba(66,66,69,0)"
}