如何覆蓋本機配色方案設定以獲得更好的使用者體驗？

覆蓋本機配色方案設定

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

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

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

CSS 設定

CSS 變數定義主題參數：

<code class="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;
}</code>

整個樣式表中都使用變數來確保彈性：

<code class="css">body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}</code>

JavaScript 實作

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

<code class="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();</code>

toggleTheme 函數處理主題切換主題：

<code class="javascript">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');
  }  
}</code>

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox_theme">
</label></code>

結論

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

以上是如何覆蓋本機配色方案設定以獲得更好的使用者體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！