深色模式
Dark Mode也常被叫作：暗色模式夜间模式深色主题暗黑模式黑底白字
「想让页面跟着系统或用户切换成黑底白字的深色外观。」
深色模式 Dark Mode
给界面准备一套黑底浅字的配色方案，用户手动或跟随系统切换。
深色模式是同一套界面的第二套配色：把浅色底换成深色底，把深色文字换成浅色文字，而不是「把颜色全反过来」。它要解决的问题很具体——用户在暗环境里看屏幕不刺眼、更省电、有些人觉得更舒服。它不是把产品换个皮肤，而是要认真保证在深色底下文字依然读得清、对比度依然够。
最容易翻车的做法是「把所有颜色取反」：把白变黑、黑变白、蓝变黄。结果通常是一塌糊涂，因为浅色和深色是两套独立的色板，不是一组颜色的镜像。深色底上的灰色、阴影、卡片层次、文字深浅，都要重新设计。比如深色模式下很少用真正的纯黑（#000），而是用带一点灰的近黑，因为纯黑会显得死板而且 OLED 上会让相邻色块糊在一起。
接入方式上，深色模式通常用一个「主题变量」开关：一套 CSS 变量存浅色值，一套存深色值，切换时就换一套。要么让用户手动切换，要么跟随系统（浏览器能读系统偏好）。关键验收点有两个：切换后每一处颜色都跟着变了（不能有某块还亮着），以及对比度在深色下依然够（浅色文字在深色底上要看得清）。
长什么样 真实可交互，不是截图
左：切换走的是「主题变量」这条路，一整套配色一起换。右：只改了背景色，没改文字色，结果深底上还是深字，读不清——这是深色模式最常见的翻车现场。
拆开看，里面有这几块
-
1
主题变量 Theme tokens
一套存放颜色值的 CSS 变量，浅色和深色各存一份。切换主题就是切换用哪一份。
-
2
深色底 Dark surface
深色模式下的底色，通常不是纯黑而是近黑，带一点灰阶。
-
3
前景对比 Foreground contrast
深色底上的文字和图标要用够亮的浅色，否则看不清。这是深色模式最难做对的部分。
常见的有哪几种
页面上放一个「日/夜」开关，用户自己切，记住用户选择。
用在：用户偏好明确的页面
自动读取系统深浅色偏好，跟随切换。
用在：用户没手动选过时作为默认行为
容易搞混？这样区分
深色模式是两套精心设计的配色；反色滤镜是把所有颜色机械地取反（像放大镜的负片）。取反几乎总是出现颜色乱掉、对比度失控的问题。真正深色模式的灰色、阴影是单独调过的，不是取反出来的。
深色模式是配色的深色方案；护眼模式是把屏幕色温调成偏黄/偏暖来减少蓝光。两者是不同的机制，不冲突，但别让 AI 用调色温来假装实现了深色模式。
什么时候用得上
从浅色切换到深色后，每一块区域、每一段文字、每个按钮都一起变，没有某块还亮着。
把电脑切成深色系统主题，页面自动跟着变，不需要手动点开关。
图表里的线、图片上的文字在深色底上也要看得清，这部分最容易被漏掉。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【任务】给 [页面/组件范围] 加深色模式 【方案】用一套「主题变量」实现：颜色集中存成 CSS 变量，浅色和深色各一份，切换就是换变量值，不要散落在每个组件里硬编码颜色 【切换方式】支持 [跟随系统偏好]（系统切深色页面自动跟着变），可选加一个手动「日/夜」开关 【要求】 - 深色底下不要用纯黑 #000，用带灰阶的近黑做底色 - 深色底上的文字、图标要保证对比度，浅色文字要看得清 - 图表、图片、阴影在深色下也要能看清，不能漏 【边界】不改布局、字号、间距、功能；浅色模式的外观保持不变 【交付】列出改了哪些文件、主题变量定义在哪、我打开哪个地址怎么切换能看到深浅两套效果；你如何证明每一块都跟着变了；你没验证的部分单独说
关键是把「用主题变量 + 不能散落硬编码」写成硬要求，防止它只改几个背景色就交差。同时要求它说明怎么验证「每一块都变了」，逼它想清楚自己有没有漏掉图表和图片。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 切换深色后，逐块扫一遍：背景、文字、按钮、输入框、弹窗、图表、图片上的文字，没有哪一块还停留在浅色没跟着变。
- 深色底上的浅色文字读得清，不是那种「勉强能看到」的糊。
- 切回浅色后，外观和之前完全一样，没有因为加深色模式把浅色也改坏。
- 跟随系统模式下，把系统切成深色主题，刷新页面自动变深；切回浅色也自动回来。
- 颜色值都来自那套主题变量，而不是每个组件里散落的硬编码数字。
它常这么糊弄你
- 「深色模式已完成」——切换后背景变黑了，但某些文字还是深色，黑底深字看不清。逐块看，别只看整体。
- 只改了背景色没改图表和图片，深色下图表线条糊成一团。
- 用了纯黑 #000 当底色，说「最纯正的深色」，实际看着死板、色块糊在一起。
- 加了一个不生效的开关，或者开关状态没记住，刷新后又是浅色。
- 把系统色温（护眼模式）当成深色模式，只是让屏幕变黄，界面根本没换配色。
深色模式能验到「主路径」层：你自己切换、自己逐块扫，用开发者工具看文字颜色是否来自主题变量即可。注意它和「反色」「调色温」是两回事，验收标准是「深色下每一处都看得清且来自一套变量」，不是「看起来像暗的」。
考考你 选一个你觉得对的
AI 说「深色模式做好了」。你切换后看到：背景变黑了，但某些段落还是深灰字，几乎看不清。这说明什么？
深色模式的验收核心是「深色底下每一处都看得清」。背景黑了但文字还是深色，是只改了部分颜色、没做完整对比度的最典型翻车。A 在帮它找借口，C、D 是把责任推给用户和设备。