用户把手机切到深色模式，小程序订单页一半黑一半白，是颜色变量没收口还是图片资源没换深色版？

用户把手机切到深色模式，小程序订单页一半黑一半白，多数不是手机或平台出了故障，而是颜色来源没统一：一部分色值写死在页面样式里，一部分跟着系统主题走，再加上图片、图标、第三方组件和系统原生控件各管各的，切换后就会只变一半。2026 年项目交付里比较稳的做法，是先把颜色收口成一套语义变量，再决定要不要给用户手动开关。适合页面量中等、组件有复用的定制小程序参考；页面很少、以扫码核销为主的项目，可以晚点再做。

深色模式下，小程序里到底有哪些东西会变色

深色模式不是换一张皮肤图，而是把界面上所有会显示颜色的元素统一到一套可切换的规则上。小程序里的颜色来源至少有四类：页面与自定义组件样式里写死的色值、按平台主题配置读取的变量、图片图标这类位图资源、以及系统原生控件。前三类归开发者管，第四类只能跟随系统，这就是有的地方变了、有的地方没变的根源。

它重要，是因为用户开深色模式多半在夜间或弱光环境。这时大面积白底会显得刺眼，但更常见的问题是半适配——导航栏变深了、内容区还白着，或者深色下浅灰文字看不清。这类问题不影响功能跑通，却会在客服、评价和验收会上被反复提起，属于典型的体验型返工点。

• 页面样式层：直接写死的十六进制或 rgb 色值，切换主题时不会变。
• 主题变量层：按平台主题配置项读取，能跟随系统设置变化。
• 资源层：图片、插图、logo、二维码是位图，不会自动反色。
• 原生层：系统键盘、系统弹窗、部分地图与视频界面，只能跟随系统，改不动。

先查颜色变量还是先查图片资源：判断没适配还是半适配

很多团队说已经做了深色模式，实际只改了导航和页面底色。判断口径不是看配置里有没有打开开关，而是看切换后还有没有色块突兀、文字与背景对比不足、图片留白刺眼这三种现象。

建议按下面四步核对，顺序不要颠倒：先看颜色来源，再看页面走查，然后看资源，最后看切换时机。顺序颠倒容易来回返工，比如先挑图片，等变量收口后图片还得重挑一遍。

1. 数颜色来源：搜一遍代码里还剩多少字面色值，没有语义命名的色值越多，收口越差。
2. 按页面走查：把登录、首页、列表、详情、下单、支付、订单、个人中心逐页切一次主题，记下异常页。
3. 看资源：把有白色底的图片、二维码、活动插图列成清单，标出哪些必须出第二份。
4. 看切换时机：在页面停留时切换系统主题，看是即时响应，还是必须杀掉小程序重进才生效。

落地时可以用颜色三层收口来推进

适配做不干净，通常不是态度问题，而是没有分层。按移动端定制项目里的交付习惯，把工作拆成三层推进，返工更少、沟通也更清楚。

1. 第一层：语义变量。把颜色定义成有用途的名字——页面背景、卡片背景、主文字、次文字、分割线、品牌色、成功与警示色。变量名描述用途、不描述颜色，否则以后调整又要满改一遍。
2. 第二层：组件对齐。自定义组件只引用语义变量，代码里不再出现字面色值；第三方组件库要逐个核对默认配色，多数需要在引入处覆盖。
3. 第三层：资源分层。能用透明底图标加换色解决的，不做第二张图；必须双份的，比如白底 logo、插图、截图类素材，单独打包，并在命名上区分主题，避免上线漏发。

这三层的顺序不建议反。先收变量再换图更省事；先换图再收变量，前面挑的图很可能用不上。做到什么算合格：切换主题后页面上不再出现与主题冲突的大面积浅色块，正文与背景肉眼可读，关键按钮与分割线仍有层级。

交付现场容易卡住的几个点

在项目里常见的情况是：需求清单里没写深色模式，测试阶段客户用夜里的手机一看，一半页面发白，于是临时加进来。这时候预算和排期都要重算。按 2026 年的项目交付习惯，比较稳的做法是先把登录、下单、支付、订单这几个关键页面锁死，其余页面在变更单里写清覆盖范围与时间；不写这一步，验收时容易被要求全站都改，返工和延期都压在最后两周。常见区间是，二十到五十个页面的中等体量小程序单独做深色适配，工期大约在 3 到 10 人天，具体取决于自定义组件和第三方组件的占比；如果还要加手动开关，通常再上浮三成上下。

几个高频坑值得提前列出来。

• 阴影在深色底上不可见：原来靠投影拉层级的地方，要改成描边或提亮背景。
• 半透明遮罩叠出脏色：浅色下正常的黑色蒙层，放深色底上会偏灰偏紫，需单独调。
• 小程序码与二维码：别直接放在深色背景上，留一个浅色容器，否则影响识别。
• 只改颜色没改图片：白底 logo 在深色下会像一个亮窟窿，比不变还扎眼。
• 状态栏与胶囊区域：要单独核对文字颜色，否则深色下顶部字看不见。

方案对比：只跟随系统，还是再加手动开关

两种做法没有好坏，只看场景。对比时建议盯住工作量、测试面、用户可控性、资源要求四个维度。

• 方案 A｜只跟随系统：不提供开关，主题完全跟随手机设置。工作量相对小、测试面窄，但用户在小程序内无法单独控制。
• 方案 B｜跟随系统加页内开关：用户可以在小程序里锁定浅色或深色，需要把选择持久化到本地存储，还要处理系统变了但用户锁定过的优先级。经验区间上，手动开关通常会在自动适配的工时基础上再增加三成上下。

如果小程序以扫码、核销、线下短时操作为主，方案 A 基本够用；如果用户会在小程序里长时间阅读或长时间操作，方案 B 的用户可控性更好，也更值得投入。

适用场景与边界

值得做的场景：夜间使用占比高的工具类、资讯与社区类小程序；页面数量多、组件复用率高的项目；品牌色本身不依赖大面积浅底的会员中心与订单中心。这类场景下深色适配的收益是持续性的，用户不会因为刺眼而中途退出。

可以不做或者晚点做的场景：页面总数在五个以内、以扫码或线下核销为主的小程序；内容本身强依赖图片展示，比如相册、商品大图流；项目周期与预算已经很紧、核心流程还没跑稳的阶段。

边界可以一句话记住：页面少于五个、且主要靠扫码或线下短时操作的小程序，不做深色适配造成的体验损失，通常小于适配本身带来的工期成本。

常见问题

手机开了深色模式，小程序能不能不跟着变？

可以，把主题锁定为浅色即可。但系统键盘、系统弹窗这类原生控件仍会跟随手机设置，视觉上不会完全一致。

深色适配只改颜色变量够不够，图片要不要换？

不够。有白色底的 logo、插图、活动图必须单独出深色版本；透明底图标一般只需换描边或填充色。

用了第三方组件库，深色下按钮发白是组件的问题吗？

多数是组件库自带的浅色默认值没被覆盖。按官方文档找到它的主题变量，在引入处统一改写即可。

深色模式下二维码扫不出来，该怎么处理？

给二维码留一个浅色底容器并保持四周静区，不要直接放在深色背景上，也不要在码上叠加半透明遮罩。

适配成什么样算验收通过？

关键路径页面在两种主题下都能正常阅读、无冲突色块、资源不缺失，并能在真机上即时跟随系统切换。

如果你的小程序还没做深色适配，建议先在真机上切一次主题，把异常页面截图列成清单，再决定覆盖范围——先锁关键流程页，其他页面按变更流程排期。以上判断适用于页面量中等、组件有复用基础的定制项目；页面很少或纯线下核销的小程序，可以不列入近期计划。