如何覆蓋原生深色模式設置，為使用者提供靈活的顯示控制？

如何覆蓋原生深色模式設定

簡介

隨著深色的擴散由於不同平台上的模式不同，為使用者提供選擇其首選顯示外觀的靈活性非常重要。本文解決了覆蓋本機瀏覽器設定以在深色模式和預設模式之間切換的挑戰，即使使用者的系統設定為深色模式也是如此。

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。 detectorColorScheme 函數檢查本機儲存中使用者定義的首選項、瀏覽器對 matchMedia 的支援或系統的暗模式首選項。

<code class="javascript">function detectColorScheme() {
    var theme = "light";  // Default to light

    // Prioritize local storage override
    if (localStorage.getItem("theme")) {
        if (localStorage.getItem("theme") == "dark") {
            theme = "dark";
        }
    } else if (!window.matchMedia) {
        // No support for matchMedia
        return false;
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // System dark mode detected
        theme = "dark";
    }

    // Set `data-theme` attribute on document root
    if (theme == "dark") {
        document.documentElement.setAttribute("data-theme", "dark");
    }
}

detectColorScheme();</code>

切換開關允許使用者手動覆蓋其主題首選項。 switchTheme 函數更新 data-theme 屬性並設定 localStorage 變數以在頁面載入時保留設定。

<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

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

toggleSwitch.addEventListener('change', switchTheme, false);</code>

結論

透過組合CSS 變數、主題和JavaScript，網站可以為使用者提供可自訂且以使用者為中心的介面，無論他們的系統偏好或覆蓋需求如何。該解決方案允許深色和淺色主題共存，同時確保整個應用程式具有一致且受控的視覺體驗。

以上是如何覆蓋原生深色模式設置，為使用者提供靈活的顯示控制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！