黑暗模式和视觉舒适

1）为什么一个黑暗的主题

眼睛舒适度低，眩光少，"闪光灯"。
能源：在OLED/AMOLED上，深色屏幕花费的电池更少。
专注于数据：专注于内容而不是背景。
用户期望："prefers-color-scheme"系统标志是事实上的标准。

2）原则

1.深灰色背景>UI表面的纯黑色（可读性和等级更好）。
2.内容对比：不是"黑色白色"，而是长文本的柔和色调。
3.谨慎的"亮度"：背光/重音柔和但可区分。
4.深度≠阴影：工作光度/模糊阴影而不是锐利对比。
5.可用性：WCAG AA（最低），可见焦点和可理解的状态。
6.系统设置为主要设置：自动切换和"降低运动"。

3）调色板和令牌（示例）

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• 深色模式的口音比+8-12％浅。
• 使用灰度（4-5步）避免大面积的绝对#000 （AMOLED模式例外）。

4）文本和可读性

基本文本：浅灰色"#E6E8EB"在"#0E1116"（对比度~ 12：1）。
次要文本："#A6AEB8"；提示-甚至更暗/更透明。
长读数：略微温暖的色调（减少"光环"）。
链接-重音+默认下划线；颜色≠唯一的意义载体。

5）表面、深度和玻璃

Elevations: `base` → `elev1` → `elev2`;每层较浅/较热2-4%。
阴影柔软，宽阔，不透明度低。避免"发光"笔画。
中位数面板（blur）适中；使文本与基板形成对比。
分隔符是半色调"-bd-soft"或几乎看不见的"hairs"边界。

6）状态和重点

Hover：+2-3%浅背景；Active： − 2-3%（较暗）。
焦点：一个清晰的戒指（例如'outline：2px solid# 6EA0FF；outline-offset： 2px；'），在重音按钮上也可以看到。
失明：轻轻降低对比；不要低于文本的可读水平。

7）按钮、表格和表格

小学：背景"-accent"，文字"#0E 1116"。
中学：背景"-.bg-elev1"，寄宿生"--bd-strong"，文本"--fg-primary"。
输入字段：背景"--bg-elev1"，焦点为边框重音；placeholder更暗淡，但我们读。
表格：斑马背景几乎看不见,hover行突出显示为+2-3%轻。

8）插图、标识和照片

徽标和象形图是深色上的反转版本；避免在饱和的背景上出现细细的浅色线条。
照片：在上面添加一个深色面具（40-60%），用于对比鲜明的标题。
图标：单一厚度，轮廓+填充-截至，非"有毒"颜色。

9）黑暗主题中的数据可视化

系列的颜色是中等饱和度；至少5个可区分的音调。
网格和轴是静音的（alpha 20-30％），签名是"--fg-muted"。
注释/事件-明亮但可读的；用形状/标记下划线，而不仅仅是颜色。
空数据/空白是软的"雾"而不是白色的字段。

10）性能和电池

在OLED上,它确实节省了纯黑色（#000）-在AMOLED模式下使用用户选项。
避免在弱的GPU上固体大蜡烛/斑点。
尊重"prefers-reduced-motion"：简化动画/过渡。

11）行为与切换

默认情况下,遵循"prefers-color-scheme"。
给用户一个显式开关（Light/Dark/System）,存储选择（cookie/localStorage）。
更改主题时,不闪烁：预先将主题类添加到渲染中。

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12）可用性（A11y）

文本对比≥ 4。5：1（普通），≥ 3：1（大）。
不要仅用颜色编码状态：使用图标/模式/签名。
焦点样式和键盘导航是必需的。
VoiceOver/TalkBack：角色、标签、禁忌排序。

13）反模式

在大面积的绝对黑色背景上的绝对白色文本是"闪烁"和疲劳。
黑暗的霓虹灯口音是"光噪声"。
高对比度阴影（带有刚性边界的"黑色灰色"）。
照片中的透明文字没有面具。
消失的placeholder（alpha太低）。

14）组件示例

按钮

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

卡片

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15）测试计划

灯光：黑暗的房间/日光/街头之夜。
Devays： OLED和IPS,移动/台式机,不同的密度。
A11y：对比检查器，键盘通道，可读性placeholder's。
感知：ab测试"眼睛疲劳"和夜间输入错误。
穿孔：包含黑暗主题后的RUM度量（INP/CLS）；GPU负载（光泽/阴影效应）。

16）质量指标

Contrast Violations/1k元素（目标：→ 0）。
Complaint Rate在"太暗/明亮"上。
Night Session Completion（晚上10：00-06：00的会议行为指标）。
INP/CLS p 75在Dark Mode vs Light中（不低于基础）。
Opt-in Dark Mode并保留选择主题的用户。

17）发射支票清单

• 带有4-5层曲面的黑暗主题调色板
• 文本/图标/边界的对比度对应于WCAG AA
• 可见焦点样式和状态（hover/active/disabled）
• 徽标/图标/照片改编，照片中的面具添加
• 图形-静音网格，可读签名，非"有毒"行列
• Light/Dark/System开关,保持选择而不出现"闪光"
• 尊重"prefers-color-scheme"和"prefers-reduced-motion"
• RUM/perf-dashbord，按回归排序

18）实施计划（3次迭代）

迭代1-基础（1-2周）

调色板/令牌、基本曲面（base/elev1/elev2）、文本/边界、按钮/字段/表格、主题开关。

迭代2-细节（3-4周）

深色图形和插图，照片遮罩，焦点/状态，带有重定向动作的动画，笔试。

迭代3-优化（连续）

AMOLED模式作为选项，微调对比，夜间可用性测试，Light vs Dark RUM比较，定期品牌/UX审核。

19）迷你常见问题

做纯粹的黑色背景吗？
对于UI，较深的深灰色。使用"AMOLED模式"选项保留#000。

是否需要增加口音饱和度？
在黑暗中-通常相反，它们略微变亮并减少饱和度，以免发光。

如何处理横幅图像？
添加深色基板/蒙版,检查文本和徽标的对比度。

底线

深色主题不是颜色的倒置，而是独立的设计模式：经过深思熟虑的调色板，表面水平，可读性，正确状态，调整后的图形和媒体以及尊重系统设置。依靠令牌，控制对比度和穿孔-黑暗模式将成为夜间和白天用户的舒适，稳定和美丽的工具。