行銷站與文件站若以 靜態 HTML 出貨，長年來仍常把整組色票複製兩份：一份塞在 @media (prefers-color-scheme: dark)，一份給淺色，再外加產品堅持的手動切換時的第三份。到了 2026 年，light-dark() 能把每一對顏色折成單一宣告，而 color-scheme: light dark 寫在 :root 則告訴瀏覽器：請讓原生控制項、捲軸與表單強調色跟上目前方案。本篇鎖定編譯後的靜態產物、沒有 React 主題提供者包裹的場景，示範如何疊上 @supports 降級，並解釋為何 Safari／WebKit 硬體簽核仍勝過只做 headless。當品牌色落在寬色域時，請交叉閱讀 OKLCH 與寬色域 CSS 於靜態 HTML 與 Safari 的實務，讓感知一致的權杖在淺深兩種表面上維持連續。
你將帶走瀏覽器矩陣、權杖範例、對比檢查點，以及一份為租用 Mac mini 調整過字數的 Safari 檢查清單。
為何重複色票仍讓主題在線上壞掉
人手維護的淺／深變數會漂移：設計師只調了其中一邊的 --text，深色鏡像忘了跟進，結果對比只在入夜後才跌破 WCAG。複製也會膨脹 CSS 位元組——2026 年初的公開行銷樣板，仍常揹著 gzip 後約 18–32 KB 的顏色規則，其實大多能靠 light-dark() 收斂。
以 JavaScript 切換 data-theme 會與快取層打架：若伺服器初次輸出與使用者儲存的偏好不一致，首屏就會閃錯方案。宣告式的 color-scheme 加上 light-dark()，對 Eleventy、Astro、Hugo 這類輸出而言，活動零件更少。
遙測顯示企業環境仍有約 5–8% 工作階段跑在沒有 light-dark() 的瀏覽器——請準備 @supports 降級，而不是讓這批使用者落在半套顏色上。
最後，請與分析對齊：為每個與主題相關的事件附上 CSS bundle 雜湊，產品才能確認「宣告式路徑」已取代仍在野外的舊式 JS 切換器。
設計系統若同時維護列印樣式與「僅暗色」嵌入片段，建議在文件層就標註哪些元件允許區域覆寫 color-scheme，避免工程師在頁尾小工具各自發明第二套權杖來源。
以 color-scheme 撰寫 light-dark()
先宣告兩種方案，再把權杖集中：
:root {
color-scheme: light dark;
--bg: light-dark(#ffffff, #0b0d12);
--fg: light-dark(#0b0d12, #f5f7fb);
--border: light-dark(#d7dbe4, #2a3140);
}
body {
background: var(--bg);
color: var(--fg);
}搭配語意化 HTML：把 color-scheme 設在 html，讓 meta theme-color 與表單控制項繼承一致預設。
為前緣用法加護欄：
@supports not (color: light-dark(white, black)) {
:root { --bg: #ffffff; --fg: #0b0d12; }
@media (prefers-color-scheme: dark) {
:root { --bg: #0b0d12; --fg: #f5f7fb; }
}
}靜態產生器應把上述宣告緊貼排版權杖輸出——若拆進延遲載入的 CSS chunk，chunk 抵達時常出現單幀閃爍。
建置腳本可在 CI 比對「權杖鍵集合」是否與設計權杖 JSON 同步，讓漏改深色鏡像在合併請求階段就被擋下。
矩陣：light-dark 與媒體查詢
| 作法 | 優點 | 風險 |
|---|---|---|
light-dark() + color-scheme | 每個權杖單一真實來源 | 每次 Safari 小版號都要重測原生控制項 |
僅 prefers-color-scheme | 支援面廣 | 規則重複、易漂移 |
JS data-theme | 手動切換彈性高 | FOUC 與快取不一致 |
原生輸入、表格與程式碼區塊
核取方塊、範圍滑桿與日期輸入會從 color-scheme 繼承 UA 樣式；請確認焦點環在兩種 --bg 表面上仍達 3:1。語法突顯的 pre 常硬編淺色背景——若片段只為暗色面板設計，請在元件層局部設定 color-scheme: dark。
產品常要求「品牌強調色」出現在原生控制項。請把 accent-color 與連結共用的 light-dark() 權杖配對，避免滑桿與進度條在深色模式退回系統紫色。建議一次性花 45 分鐘 做一張小型 fixture 頁，列出 CMS 會曝光的所有原生控制項；之後每次釋出重用，勝過在正式環境頁尾才發現迴歸。
靜態頁內嵌 SVG 圖表時，記得某些匯出工具的 inline fill 會忽略 CSS 變數。座標軸優先用 currentColor 描邊，讓文字上的 light-dark() 可預期地傳遞；或在建置時預處理 SVG，與 HTML 片段採同一套權杖替換。
斑馬紋表格應由 light-dark() 推導交替列，而不是兩組絕對十六進位，以免深色模式下格線「消失」。
行銷嵌入（iframe）可能忽略父層 color-scheme；請文件化哪些第三方片段需要隔離包裝，並在法遵審查時附上截圖證據。
在雲端 Mac mini 上做 Safari QA
Playwright WebKit 能驗證解析，卻抓不到 提高對比 或 降低透明度 與半透明卡片互動時的細微位移。建議每次釋出在 Apple 晶片 Safari 排 20–35 分鐘：穩定版用於合約簽核，Technology Preview 用於對色彩解析相關迴歸做二分。
若採購硬體延宕，可在衝刺期租用雲端 Mac mini。MacHTML 的 Apple Silicon 主機常見價位約 $16.9／天，含 SSH 推送靜態產物與 VNC 互動檢視主題——通常比隔夜寄借測筆電便宜。
請鏡像正式環境的 font-feature-settings、網字型 URL 與任何 color-mix() 用法；字型不匹配會改變感知亮度，讓對比假設失效。
在系統外觀切換時以 120 fps 錄影；導覽 chrome 與本文背景差一幀的爭議，有影像比口頭辯論更快結案。
若團隊跨時區，建議把「主題切換錄影」與「VoiceOver 朗讀連結」拆成兩張子票，避免單人馬拉松漏測輔助情境。
對比、強制色彩與降低透明度
法務與財務審查愈來愈常要求並陳淺／深狀態的 PDF。請以同一靜態 URL，在 headless Chrome 強制模擬 prefers-color-scheme 以及 從 Safari 列印成 PDF；若亮度數字相差超過約 4%，代表權杖仍依賴你尚未收斂進 CSS 的 UA 啟發式。
請在 macOS 啟用 提高對比 測試：部分半透明面板會塌成平面色，暴露出你以為只是裝飾的邊界權杖。
尊重 prefers-reduced-transparency：把玻璃擬態層換成由同一組 light-dark() 權杖推導的不透明表面。
不要只靠顏色表達狀態——搭配字重或圖示，讓強制色彩使用者仍能辨識錯誤。
對外簡報若需展示「設計權杖表」，建議同步附上實際元件在 Safari 螢幕擷取，避免利害關係人把 Figma 色票誤認為已上線像素。
靜態管線釋出檢查表
與 CDN 營運對齊：若 HTML 仍舊但權杖已新，使用者會看到「未樣式化文字」——比只舊 CSS 更刺眼。當 color-scheme 變更時，請一併清除 HTML 與 CSS 的快取鍵，並在清除後保留約 15 分鐘 觀測視窗，捕捉邊緣 POP 仍提供不匹配配對的情況。
- 先在 staging 以 body 上的 data-attribute 開關，直到視覺 diff 通過。
- 以 Playwright 快照涵蓋兩種方案且視窗寬度相同——若像素漂移超過視窗寬度的 2% 即告警。
- 文件化各語系釋出順序；CJK 市場常較早浮現標點對比問題。
- 封存 Lighthouse 與 Axe 追蹤，並與 Safari 螢幕錄影共用工作階段 ID，方便稽核軌跡串起來。
釋出後第一週，請在儀表板監看「主題切換錯誤」與「表單送出失敗」是否與新權杖上線時間對齊；若只有後者上升，多半是原生控制項與自訂面板不同步，而非商業邏輯本身。
常見問題
我能完全拿掉 prefers-color-scheme 嗎？
還不行——請先放在 @supports not 內，直到分析顯示不支援流量可忽略。
light-dark() 能與 OKLCH 並用嗎？
可以，函式可巢狀：light-dark(oklch(0.95 …), oklch(0.2 …))；請查 Safari 版本說明確認 OKLCH 與 light-dark 組合行為。
Safari QA 要排多久？
主題切換約 20–35 分鐘／釋出，連結 VoiceOver 再加約 10 分鐘。
Apple Silicon Mac mini 仍是結束 WebKit 主題爭議最快的硬體：原生色彩管理、長錄影時可預期的熱行為，以及 Linux 虛擬機難以完整模擬的 macOS 無障礙開關。MacHTML 提供含 SSH／VNC 的雲端 Mac mini 租用，讓靜態站團隊能驗證 light-dark()、color-scheme 與 sticky chrome，而無需新一輪資本支出——需要時開機驗收，綠燈後再關機即可。
在雲端 Mac mini 上做 Safari 主題 QA
租用 Apple Silicon 硬體，以真實 WebKit 驗證 light-dark()、原生控制項與無障礙開關。先看定價，再依說明接入遠端桌面。