[CSS] 實現暗黑模式 - 系統配置和用戶選擇模式切換

在現今的數位時代，眾多的網站和手機應用程序均已將深色與淺色模式切換視為基本必要功能。此功能不僅保護使用者的視力，也能有效節省電能且顧及個人喜好，進而提升整體的使用者體驗。本文旨在詳細指導如何運用CSS在網頁中實現此種主題切換，以供初學者參考。

基於系統設定的初始模式設定

當用戶訪問網站時，首頁展示的界面多半是根據其系統偏好設定所決定。若使用者的作業系統或瀏覽器預設為深色模式，相應的，網頁亦會以深色模式呈現。此行為意在初始階段即符合使用者的喜好，進一步減少視疲勞，為他們帶來更加舒適的瀏覽體驗。為了達到此目的，我們需使用CSS特有的媒體查詢功能 prefers-color-scheme。

何謂 prefers-color-scheme？

prefers-color-scheme是一個用於檢測使用者在系統設定中的顏色主題偏好（如：深色或淺色模式）的CSS媒體查詢功能。

可用的值：

• no-preference: 當使用者系統沒有特定主題喜好時。
• light: 適用於淺色模式偏好。
• dark: 適用於深色模式偏好。

應用方法

1. 預設淺色模式樣式

:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}

• :root 在CSS中代表文件的最上層元素，通常用於設定整個網頁的基礎值。
• 以上述程式碼為例，其主要是設定網頁的初始模式為淺色模式。相應地，主要字體顏色、次要字體顏色以及背景色的值均已設定。
• --primary-font-color、--secondary-font-color 和 --bg-color 是CSS變量，用於儲存整個網頁所需的顏色值。

2. 深色模式偏好時的樣式設定

@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}

• @media (prefers-color-scheme: dark) 是一媒體查詢，只在使用者的作業系統或瀏覽器偏好為深色模式時套用其樣式。
• 此部分的程式碼主要是當使用者的系統設定為深色模式時，網頁的樣式亦會切換為深色模式。
• 同樣，此處也運用了CSS變數，更改主、次要字體顏色以及背景色，以適應深色模式。

透過上述的CSS程式碼，可以依據使用者的系統設定自動切換深、淺色模式。當使用者選擇深色模式偏好時，深色模式的樣式才會被啟用，反之，預設則會啟用淺色模式。

注意事項

• 並非所有瀏覽器都支持 prefers-color-scheme，因此在實施時需考慮到相容性問題。
• 單靠使用者的系統設定可能並不足夠。網站內應提供一個選項，讓使用者能夠手動切換主題。相關的設定方法將於以下內容中詳述。

依使用者偏好調整模式

網頁最初根據使用者的系統設定來設定模式，但使用者可能會根據自己的喜好調整模式。例如，基於周圍環境或特定任務，滿足使用者從深色模式和亮色模式之間切換的需求是至關重要的。此種基於使用者選擇的主題切換功能增強了網頁的靈活性，並提供了更個性化的體驗。這需要結合HTML、CSS及JavaScript來實現。

實施方法

1. HTML: 新增模式切換按鈕 於網頁加入能切換深色模式及亮色模式的按鈕或切換開關。

<button id="themeToggle">Dark Mode</button>

2. 預設與亮色模式樣式

• :root 表示CSS中的最頂層元素。通過在此定義變數，可以設定整個頁面的基礎樣式。
• [data-theme='light'] 表示data-theme屬性值為'light'的元素樣式。
• 此處定義了預設網頁上的亮色模式樣式。

:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}

3. 深色模式樣式

• [data-theme='dark'] 表示data-theme屬性值為'dark'的元素樣式。
• 此部分定義了選擇深色模式時網頁的樣式。

[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}

4. JavaScript: 實施模式切換邏輯 按下按鈕時，利用JavaScript實現網頁主題的切換。

const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

如此設定後，當使用者點擊「深色模式」按鈕，網頁主題會切換到深色模式。反之，於深色模式下點擊「亮色模式」按鈕會切換到亮色模式。

在網頁中，深色與亮色模式的切換是增強使用者體驗的重要功能之一。希望透過此文，讓讀者對這功能的實施方法有基礎的了解。即使是網頁開發新手，遵循這些指引也能有效地於網頁中新增主題切換功能。