黑暗模式和視覺舒適

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。

是否需要增加口音飽和度？
在黑暗中-通常相反，它們略微變亮並減少飽和度，以免發光。

如何處理橫幅圖像？
添加深色基板/蒙版,檢查文本和徽標的對比度。

底線

深色主題不是顏色的倒置，而是獨立的設計模式：經過深思熟慮的調色板，表面水平，可讀性，正確狀態，調整後的圖形和媒體以及尊重系統設置。依靠令牌，控制對比度和穿孔-黑暗模式將成為夜間和白天用戶的舒適，穩定和美麗的工具。