涵蓋本機配色方案設定

隨著各種作業系統的廣泛採用，實現黑暗模式變得至關重要。雖然本機瀏覽器支援透過 CSS 媒體規則 @media (prefers-color-scheme: dark) 存在，但它可能無法完全滿足使用者偏好或迎合 Microsoft Edge 等不受支援的瀏覽器。

解耦系統設定來自網站主題

為了提供最佳的用戶控制，允許用戶覆蓋系統的顏色方案設定至關重要。這確保他們可以為特定網站選擇他們喜歡的主題。為此，需要結合使用 CSS 變數和 JavaScript。

CSS 設定

CSS 變數定義主題參數：

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

在整個樣式表中使用變數以確保靈活性：

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

JavaScript 實作

JavaScript 在檢測使用者偏好和主題之間切換方面發揮關鍵作用：

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

toggleTheme函數處理主題切換：

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

此JavaScript 確保自動主題檢測，並允許使用者使用複選框覆蓋它：

結論

透過結合 CSS 變數和 JavaScript，我們使用戶能夠控制網站的配色方案，無論其係統設定如何。這種方法可確保增強的使用者體驗，滿足個人喜好和各種瀏覽器的限制。