如何為網站或應用程式加入深色模式（避免白色閃爍）

要加入深色模式，請把你的顏色定義為具名的權杖（背景、文字、表面、邊框、強調色），而不是寫死的數值；為每個權杖提供淺色和深色兩組值；再使用 CSS 的 prefers-color-scheme 媒體功能在兩者之間切換，讓網站跟隨訪客的系統設定。如果你同時想要手動切換按鈕，請把選擇儲存在瀏覽器中，並透過頁首的一小段行內腳本套用，這樣載入時便不會閃白。然後在兩種主題下檢查對比度、圖片和圖表。在 AI 應用程式生成工具中，一句清楚的提示詞便可以完成大部分工作；真正決定品質的，是之後的檢查。

兩種做法

大多數應用程式以第二種做法效果最好：預設尊重系統設定，同時讓人可以自行覆寫。

從顏色權杖開始

如果顏色散落在程式碼各處，例如 white、#333 和 gray-100，深色模式就會很麻煩。但如果每個顏色都來自一小組具名的權杖，事情就變得容易：

每個元件都使用權杖名稱。這樣切換主題時，只需替換一組數值，而不用逐一修改每個元件。

深色配色的小技巧：

• 大面積區域避免使用純黑與純白；非常深的灰色和微白色較易閱讀。
• 用較淺的表面顏色表現層次，而不是用陰影——陰影在深色背景上幾乎看不見。
• 把過於鮮艷的品牌色稍微降低飽和度；它們在深色背景上可能會發出刺眼的光芒。
• **保持對比度清晰可讀。**WCAG 的 AA 級別要求一般文字的對比度至少為 4.5:1。淺灰色文字在深色主題中經常不達標。

配合 Tailwind CSS

Tailwind 是許多 AI 生成應用程式的預設樣式工具。根據 Tailwind 的深色模式文件，dark: 變體預設使用 prefers-color-scheme，因此 bg-white dark:bg-gray-900 之類的類別無須任何額外工作，便會跟隨系統設定。

如果要在 Tailwind v4 中加入手動切換，文件建議把變體改為在父元素上使用類別：

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

然後應用程式會在根元素上新增或移除 dark 類別。文件也建議在頁首加入一段行內腳本，在頁面繪製之前套用已儲存的選擇（或系統設定）。這正是避免閃白的方法。

避免白色閃爍

閃爍的原因是頁面先以淺色模式繪製，然後 JavaScript 載入、讀取已儲存的選擇，再切換成深色。解決方法如下：

1. 在頁首放一小段行內腳本，讀取已儲存的主題，並在任何內容渲染之前於根元素上設定類別。
2. 為每種主題設定 color-scheme CSS 屬性，讓瀏覽器繪製的部分（捲軸、表單控制項）與主題相符。
3. 在兩種主題中為頁面設定明確的背景顏色。
4. 如果應用程式是伺服器端渲染的，請確保伺服器與瀏覽器對初始主題的判斷一致，否則頁面可能重新渲染而閃爍。

例子提示詞

完整的設定：

加入深色模式。首先把寫死的顏色換成主題權杖（背景、表面、文字、次要文字、邊框、強調色），並為每個權杖提供淺色與深色的值。預設跟隨訪客的系統設定。在頁首加入切換按鈕，提供「淺色」、「深色」和「系統」選項，把選擇記在 localStorage 中，並透過頁首的行內腳本套用，令載入時不會閃白。為兩種主題設定 color-scheme。保留目前的淺色設計完全不變。

修正剩餘的問題：

在深色模式下檢查每一頁，並修正以下問題：對比度不足的文字（目標至少 4.5:1）、寫死的白色背景、消失了的邊框、深色文字位於深色背景上的圖表，以及消失不見的標誌。不要更改淺色主題。

圖片與圖表：

深色模式下使用標誌的淺色版本。讓圖表的座標軸、格線和標籤使用主題權杖。在深色模式下為截圖加上淡色邊框，免得它們與背景融為一體。

逐步進行

1. **審核顏色。**找出寫死的顏色，並以權杖取代。這是大部分的工作。
2. 為每個權杖定義深色值。
3. 以 prefers-color-scheme（或 Tailwind 預設的 dark:）跟隨系統。
4. **如需要，加入切換按鈕：**淺色、深色、系統。把選擇儲存在瀏覽器中；對於需要登入的應用程式，也可以把它儲存到用戶的個人資料中。
5. 以頁首的行內腳本和 color-scheme 防止閃爍。
6. **檢查較棘手的部分：**標誌、圖示、帶白色背景的圖片、圖表、程式碼區塊、地圖、嵌入內容、電郵。
7. 測試兩種主題，分別在桌面和手機上進行，系統設定為淺色和深色各測一次，並在強制重新整理之後再測。

常見錯誤

• **把所有東西都反轉。**會把照片和品牌顏色弄壞的濾鏡效果。
• **遺留寫死的顏色。**深色頁面中一張白色卡片會立即顯眼。
• **低對比度的灰色文字。**看起來很有風格，卻不易閱讀。
• **載入時白色閃爍。**在夜間使用手機時特別明顯。
• **忘記第三方嵌入內容。**地圖、影片和小工具可能仍然是淺色；請檢查它們是否有深色選項。
• **只有兩個狀態的切換按鈕。**用戶一旦點擊過，就無法回到跟隨系統的設定。
• **破壞淺色主題。**在提示詞中明確說明淺色設計應保持不變。

檢查清單

• 所有顏色都來自主題權杖
• 預設跟隨系統設定
• 可選的切換按鈕提供淺色、深色和系統選項，並會被記住
• 載入或重新整理時不會閃白
• 已設定 color-scheme，表單控制項與捲軸相符
• 兩種主題下的文字對比度都至少為 4.5:1
• 標誌、圖片、圖表和嵌入內容已在深色模式下檢查
• 淺色主題保持不變
• 已在桌面和手機上測試

在 Mythex 加入深色模式

在 Mythex 建立的應用程式預設使用 Vite、React、TypeScript 和 Tailwind，因此上述的 Tailwind 做法可以直接套用：把完整設定的提示詞貼到對話中，然後在兩種主題下，以及手機尺寸下，檢查預覽。Mythex 的設計提示詞建議是說明要更改什麼、保留什麼，這一點在這裡尤其重要——請說明淺色主題必須保持不變。詳見設計與介面提示詞。如果某次修改出錯，可以用檢查點還原。

關於如何令外觀達到理想效果，請參閱如何用 AI 設計美觀的應用程式，以及如何為 AI 應用程式生成工具撰寫提示詞。

常見問題