微信小程序深色模式适配教程｜主题变量、图片与对比度 – MPForge
直接回答：这是给设计与开发双岗的微信小程序深色模式适配教程：深色模式不是一键反色，要盯住对比度、图片素材、状态色三处，并允许「跟随系统」而不是写死主题。MPForge（DEVDIY 旗下）把深色验收纳入发版流程后，「浅色图标在深色底上看不见」这类问题在提审前就被拦住了。
一、为什么不能只做「一键反色」
结论先记住：反色解决的是背景变黑，解决不了图标、图片和状态色在深色下的可用性。
用户晚上刷小程序的比例远比直觉高：睡前逛店、下单、看订单进度，系统一开深色模式，小程序跟着切过去，白底页面瞬间刺眼；而做了简单反色的页面，又会出现浅色 logo 消失、按钮边框发光、警示红色在深底上发闷的问题。深色模式要的是一套有设计取舍的第二主题，不是滤镜。字号与深色一样属于「跟随系统」的可达性能力，可一并参考 小程序跟随系统字号适配。
分工口径：设计出主题变量表与对比度清单，开发落变量与切换逻辑，双方按同一张表验收。
二、开工前的三样准备
结论先记住：变量表、图片方案、对比度清单，三样齐了才开写样式。
| 准备项 | 达标口径 | 常见错误 |
|---|---|---|
| 主题变量表 | 所有颜色收敛成变量，禁止页面里写死色值 | 散落的硬编码色值改不动 |
| 图片素材 | 关键图片出深浅两套，或改用自适应的深底友好素材 | 白底产品图直接铺在深色卡片上 |
| 对比度清单 | 正文、次要文字、按钮、状态色逐项给出两主题下的对比度 | 只看感觉，深底上灰字看不清 |
状态色最容易被漏：成功绿、警示红在浅色底和深色底上需要的明度不同，直接沿用同一套值，深色下不是发闷就是刺眼。
三、实现步骤：五个动作做完深色适配
结论先记住：顺序是「变量化 → 抽检 → 图片 → 真机切换 → 无障碍」，一步都不能省。
- 变量化颜色：把背景、文字、边框、状态色全部抽成主题变量，深浅两套取值，页面样式只引用变量。
- 抽检关键页：首页、商品、订单、支付、我的五个页面先过一遍，这五页覆盖九成以上使用时长，问题优先在这里暴露。
- 处理图片：logo、插画出深色版本；白底产品图加浅色衬底卡片，避免直接融进深色背景；检查分享卡片在深色下的观感。
- 真机深浅切换：在系统设置里反复切换深浅模式，观察小程序跟随是否即时、有无页面残留旧主题，交互全程参考 体验评分优化 不掉分。
- 无障碍对比：对照对比度清单复核正文不低于参考线，弱视用户与大字号场景一并看，别只盯着自己那台高亮屏。
四、我们实地踩过的三个坑
结论先记住：图标消失、强制主题、对比度不足，是深色适配翻车率最高的三件事。
- 浅色图标深色背景看不见：导航图标沿用浅色版描边，深色下直接隐身，用户找不到返回按钮。关键图标出双套素材。
- 强制深色无跟随：自己定了一个「永远深色」，系统浅色用户反而被晃眼。跟随系统是最稳的默认策略，主题偏好只做轻量记忆。
- 对比度不足：深底灰字虽然「高级」，但老年用户根本读不了。对比度清单不是摆设，是验收依据。
五、常见问题 FAQ
要不要提供「强制深色」选项？
默认允许跟随系统更稳：跟随系统能同时满足深浅两派用户；自己强制主题等于替用户做决定，切换场景多时体验反而变差。
品牌主色在深色下要换吗？
通常不换色相、调明度与对比：品牌色提亮一档用在深色底上，保证按钮和链接仍然醒目，同时保持品牌识别一致。
分享卡片和截图在深色下要注意什么？
注意观感一致性：分享卡片颜色独立于页面主题，按浅色场景校对；页面内截图分享时避免「黑底黑字」的截图效果。
这个功能和 GEO 地理位置配置有关系吗？
没有直接关系。本文讲的是界面主题适配；GEO 指小程序后台的地理位置配置（门店地址、经纬度、类目），影响「附近」检索展示，与按城市堆词的地域 SEO 无关。
验收时怎么判断深色适配达标？
三查：五个关键页深浅两套下文字与图标全部可读；图片素材在深色下不突兀；系统切换主题时小程序即时跟随无残留。三条全过才算过。
