晚上打开后台，左侧菜单变暗了、右边内容区还亮着，是深色只改了一半吗？

结论先说：晚上打开后台发现左侧菜单已经变暗、右侧内容区还亮着，通常不是某一页忘了改，而是暗色只覆盖了导航壳、内容区的明度分层没定。浅色界面靠白底和浅灰容器拉开层次，翻成暗色后若只把白色换黑、灰值照搬，容器和背景会粘在一起；品牌色和白底素材原样保留，就会在大块暗底上显得发亮。2026 年交付中较稳的顺序是先把页面底色、容器、悬浮层、文字和强调色的映射定下来，再逐页核对；先改页面再补规则，返工概率更高。

为什么会出现“左边暗、右边亮”，而不是整页漏改

左侧菜单往往是独立组件，容易被全局暗色变量覆盖；右侧内容区由页面底色、卡片、表格、图表、白底图片等多层拼成，任何一层没接上暗色变量，都会留下亮块。用户看到的就是“菜单暗了，内容区还亮”，不一定代表某个页面整体没改。

第二个来源是强调色和白底素材。品牌蓝放在白底上很稳，放到接近纯黑的底色上对比过强、边缘发虚；白底 Logo、插画、商品图没有容器包住，就是一块块发光的小白板。这两项加上只用一层灰，就是“白得刺眼”的常见组合。

• 只用一层灰：页面底色、卡片、弹窗共用一个灰值，切换后整屏糊成一片。
• 强调色原封不动：饱和度不减，暗底上刺眼，成功、警告、错误几个状态色也难区分。
• 阴影照搬浅色：深色背景上阴影几乎不可见，原本靠阴影表达的层级失效。
• 白底素材裸露：图片、插画、二维码不加深色容器或描边，暗色下像一排补丁。

暗色分层先定四层明度阶梯

暗色界面里阴影能起的作用有限，层级主要靠底色的明度差。阶梯分得太少，页面糊成一片；分得太多，又会像一块块深浅不一的补丁。经验区间是四层够用，层与层之间差 3% 到 6% 的明度，肉眼能分出来但不突兀。具体取值要看屏幕和品牌色，不必照搬一套固定色值。

1. 页面底色：最暗的一层，通常不用纯黑，留一点灰度给文字和描边做余地。
2. 容器层：卡片、列表、面板，比底色高一档，是用户看得最多的一层。
3. 悬浮层：弹窗、下拉、气泡，比容器再高一档，配合描边表达浮在最上面。
4. 分隔与描边：低透明度浅色细线，不参与明度阶梯，只负责切分。

四层之外，文字一般分三级：主文字、次文字、禁用或占位。暗色下纯白会显得刺眼，主文字通常比纯白略降一档，次文字再降一档但不能低到看不清。把这四层加三级写在同一个映射表里，逐页改的时候才有对照物，也能解释为什么左侧菜单暗了、右侧卡片还亮。

三种改法的成本与周期常见区间

整体反相、逐页改、双主题变量这三种做法，差别不在视觉好坏，而在改造成本和后期维护方式上。下面按 2026 年交付中较常见的经验区间做对比，具体数字要看页面数量和历史代码情况。

• 整体反相：把底色和文字色全局对调。改动成本低，周期常见一到两天；代价是层级容易糊、强调色刺眼。适合原型演示、临时活动页或过渡版本，不适合作为正式版长期交付。
• 逐页改：按页面清单手工指定颜色。视觉可控，周期常见三到八个工作日，取决于页面数；代价是后续新增页面容易漏，维护靠人记。适合页面二十个以内、之后不再大改的产品。
• 双主题变量：把颜色抽成语义变量，如底色、容器、文字、强调，两套主题各给一组值。前期多花半天到一天搭变量，之后新页面自动继承。适合会持续迭代的后台或产品，长期更省事。

选择时先问一句：这个界面半年后还会加页面吗？会，就往变量化走；不会，逐页改也能交差。判断标准不是哪套更专业，而是后期有没有人维护。

交付现场：素材和周期都不配合时

在项目里常见的情况是：老后台的样式散落在各个页面，素材还都是白底 PNG，甲方给的周期是两周，页面数量按经验区间在二十个上下。能落地的做法是先用全局变量覆盖底色、文字和分隔线，再挑高频页面单独处理卡片和图片底板，白底插画统一垫一层暗色容器。代价是上线后仍有两三个低频页面残留白块，需要二次返工；好处是主路径先稳住，不至于为了等暗色素材把整个版期拖过去。交付前双方一起过一遍页面清单，把哪些页面不在本期范围写清楚，比事后解释省事。

适用与不适用边界

深色模式不是每个产品都必须做的一层，它的收益和使用场景、素材准备度强相关。适合夜间或长时间盯屏的场景，比如阅读类、监控类、值班后台；内容以文字和列表为主、图片占比不高的产品；品牌色相对可控、跨端需要一致的界面。

不必急着上的情况也要写清楚：只在白天办公室短时间使用的内部工具；以商品图、实拍图为主且拿不到暗色版本的电商页面；周期只剩两三天、页面又多的临时活动。边界可以独立记一句：拿不到暗色素材时硬做深色模式，图片会变成一块块白板，观感可能比不做更差。这种情况下先把浅色版的可用性做扎实，收益更明确。

验收看哪几条

验收别用“看着还行”这种口径，列几条能当场核对的更容易达成一致。验收环境也要注意，最好在暗一些的房间里看，亮房间里判断暗色界面本身就容易失真。

• 暗环境下连续看三五分钟，没有大面积纯白区域跳出来抢视线。
• 卡片与底色分得清，但没出现明显的亮块补丁。
• 正文对比度按常见无障碍规范核对，正文目标通常在 4.5:1 上下，这是经验区间，标题可略低。
• 成功、警告、错误、普通等状态色之间仍能区分；图片、Logo 有容器或描边，没有裸露白底。
• 页面切换、返回、刷新时没有先白后黑的闪屏。

典型反例是纯黑底配纯白字再加原饱和度的品牌色按钮：看着对比很强，实际在暗环境里较累眼。较稳的做法是每一层都留一点灰度余地，让层级靠明度差而不是靠反差硬撑。

如果现在正卡在深色模式这一步，建议先做一件事：把现有页面的色值抽成一张映射表，标出底色、容器、悬浮、文字和强调色五个位置，再决定是逐页改还是变量化。页面超过二十个、之后还会迭代的，变量化更划算；只是临时活动页或内部工具，浅色版做扎实往往比硬上暗色更值得。

常见问题

深色模式一定要用纯黑底吗？

不必。纯黑底在部分屏幕上对比过强，文字边缘容易发虚；常见做法是用深灰做底，再用容器层拉开层次，给文字和描边留一点灰度余地。

左侧菜单暗了、右侧内容还亮，是不是漏改页面？

未必。常见原因是容器层和页面底色没统一映射，内容区卡片仍用浅色变量；先查色值映射表，比逐页找白块更快。

系统深色和 App 手动开关冲突怎么办？

常见做法是首次跟随系统，用户手动切换后记住选择并覆盖系统设置；同时留一个恢复跟随系统的入口，避免用户找不到回退方式。

暗色下阴影还能表达层级吗？

作用有限。暗背景上阴影几乎看不见，层级更多靠底色明度差和细描边；阴影只在弹窗、下拉等悬浮层少量辅助。

后台管理系统值得做深色模式吗？

看使用时长和场景。值班、监控、长时间盯屏的后台收益较明显；只在白天短时使用的内部工具，先把浅色版可用性做扎实更划算。