深色模式與 i18n · SaaS Guide

深色模式跟多語系常被當成「最後再補」，結果做出來的不是純黑刺眼，就是德文一上去整排按鈕爆版。這章把這兩個「國際化基礎」放一起：深色靠 token 與亮度層次而不是 invert，i18n 靠預留空間與 formatter 而不是字串串接。要支援這兩者前，先翻這頁對規格。

這是什麼

淺色模式靠陰影讓卡片浮起；深色模式則讓越上層的表面色越亮，而非依賴陰影。

什麼時候用

設計深淺兩套界面時，各自選擇適合的層級表現方式。

這是什麼

提供淺色、深色、跟隨系統三種選項，使用者選擇後記住偏好，全站同步切換。

什麼時候用

設定頁或頂部列提供主題切換，並避免切換時畫面閃爍。

這是什麼

按鈕與標籤寬度隨文字伸縮，預留多語系空間（例如德文可能比英文長三成以上）。

什麼時候用

產品需支援多語言時，版面不能假設所有語系字數相近。

用 ICU message format；日期／數字用 Intl.*。

規格速查

項目	定稿值
深色底	不用純黑 `#000`，用深灰（content `#0A0E14`、sidebar `#0F141C`）
深色文字	不用純白 `#FFF`，用淺灰（如 `#E2E8F0`）
飽和色	深色下降飽和 10–20%，避免螢光感
Elevation	越高的層越亮（surface tone 變化，不靠 shadow）
深色對比	維持 WCAG ≥ 4.5:1
i18n 文字空間	預留 30–40% 延伸（英文短、德文長 35%）
RTL	支援阿拉伯文 / 希伯來文，mirror layout、icon、padding
格式化	日期 / 數字 / 貨幣用 `Intl.*` locale formatter + ICU plural

做錯	正確
純黑底配純白字	深灰底 + 淺灰字，維持 4.5:1，降低眼睛疲勞
深色模式直接 invert 淺色	用 dark 專屬 token 值，飽和降一階、elevation 越高越亮
button / nav item 寫死寬度	不寫死寬度，預留 30–40% 讓長語系（德文）不爆版
用字串串接組合句子	用 ICU message format / `t("key", { count })`，不要 `+`