暗色模式與介面色彩對比度微調

全新視覺體驗與設計理念

在現代的網頁與應用程式設計中，提供「暗色模式」（Dark Mode）已經從一個加分選項，變成了不可或缺的基礎功能。尤其對於我們這款大眾運輸導向的應用程式而言，許多使用者會在清晨、深夜或是光線較暗的車廂內開啟應用程式來查詢路線與班次。在這些低光源的環境下，傳統的亮色白底介面往往會對使用者的眼睛造成強烈的刺激與疲勞。為此，我們在本次更新中正式導入了深色模式，並針對介面的色彩對比度進行了深度的微調，期望能帶來更為柔和、舒適的視覺體驗。

本次新增的暗色模式功能，主要透過偵測使用者作業系統或瀏覽器的偏好設定，自動切換至相應的佈景主題。這項功能帶來的全新使用者體驗（UX）是顯而易見的：當使用者在夜間開啟應用程式時，再也不會被刺眼的白光干擾視覺。深色背景搭配經過特別挑選的文字顏色，不僅降低了螢幕發光量，更延長了搭載 OLED 螢幕手機的電池續航力。這對於每天需要依賴我們系統進行跨城鎮通勤的使用者來說，無疑是一項極度貼心且實用的改進。

開發過程中踩過的坑

然而，在開發這個看似簡單的切換功能時，我卻踩到了一個相當經典的坑。在專案初期的快速迭代過程中，為了求快，我在許多 CSS 樣式中直接寫死了十六進位（Hex）的顏色色碼。例如，所有資訊卡片的背景色被強制設定為 #ffffff，而主要文字顏色則被設定為 #333333。當我初步嘗試在最外層容器加上深色背景時，這些寫死的顏色設定導致了災難性的結果：有些區塊仍然是突兀的白色，有些地方則是深色背景配上深灰色文字，對比度極低，幾乎無法閱讀。

這不僅破壞了整體的視覺美感，更嚴重違反了無障礙網頁設計（WCAG）的對比度標準，讓整個介面看起來像是一個拼湊不良的半成品。即使我嘗試在頂層覆寫樣式，但由於 CSS 權重（Specificity）的問題，許多深層元件依然頑固地保留著原本的明亮設定，這使得手動逐一修正變得不切實際且容易遺漏。

診斷與程式碼重構

為了解決這個問題，我必須進行全面的樣式重構與系統性的問題診斷。我利用 Chrome DevTools 的 Rendering 面板來模擬 prefers-color-scheme: dark，並仔細檢查每一個 DOM 元素的計算樣式（Computed Styles）。我發現問題的根源在於系統缺乏一套統一的設計系統（Design System）來管理色彩代碼。

為了解決這個色彩寫死的技術債，我決定全面導入 CSS 自訂屬性（CSS Custom Properties，即 CSS 變數）。我將所有與顏色相關的設定抽取出來，集中定義在 :root 選擇器中作為全域變數。接著，我透過媒體查詢，在深色模式下重新賦予這些變數新的顏色值。如此一來，元件的樣式程式碼就不再需要關心具體的顏色代碼，只需引用對應的變數名稱即可。這項重構徹底修復了夜間模式下文字難以閱讀的問題，並確保了未來的擴充性。

/* 寫死的顏色代碼，無法適應深色模式 */
.card-container {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #dddddd;
}

body {
    background-color: #f5f5f5;
}

/* 導入 CSS 變數與 prefers-color-scheme */
:root {
    --bg-color: #f5f5f5;
    --card-bg: #ffffff;
    --text-primary: #333333;
    --border-color: #dddddd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --text-primary: #e0e0e0;
        --border-color: #333333;
    }
}

.card-container {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

body {
    background-color: var(--bg-color);
}