Wie können Sie die Systemeinstellung „Prefers-Color-Schema“ für bestimmte Websites außer Kraft setzen und unabhängig von der Systemeinstellung des Dunkelmodus ein konsistentes Benutzererlebnis gewährleisten?

Überschreiben der CSS-Einstellung „bevorzugt-Farbschema“

Um der Einführung dunkler Modi in macOS, Windows und Windows Rechnung zu tragen iOS ist es unerlässlich, einen Dark Mode für Webanwendungen zu implementieren. Native Optionen in Safari, Chrome und Firefox nutzen die CSS-Medienregel „@media (prefers-color-scheme: dark)“, um automatisch Dark-Mode-Stile anzuwenden, wenn das System auf Dark Mode eingestellt ist.

Allerdings Die Einschränkung dieses Ansatzes liegt in der potenziellen Präferenz einiger Benutzer, den Dunkelmodus des Systems für bestimmte Websites außer Kraft zu setzen. Darüber hinaus fehlt Microsoft Edge derzeit die Unterstützung dieser Medienregel.

Lösung

Um dieser Herausforderung zu begegnen, umfasst eine umfassende Lösung Folgendes:

CSS

CSS-Variablen und -Themen implementieren:

<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>

Verwenden Sie dann gegebenenfalls diese Variablen:

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

JavaScript

Erkennen Sie das bevorzugte Thema des Benutzers und wechseln Sie zwischen hellem und dunklem Modus:

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

    // Get the theme from local storage, overriding OS settings
    if(localStorage.getItem("theme")){
        if(localStorage.getItem("theme") == "dark"){
            var theme = "dark";
        }
    } else if(!window.matchMedia) {
        // MatchMedia method not supported
        return false;
    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // OS theme setting detected as dark
        var theme = "dark";
    }

    // Set document with a `data-theme` attribute if dark theme preferred
    if (theme=="dark") {
         document.documentElement.setAttribute("data-theme", "dark");
    }
}
detectColorScheme();

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;
    }    
}

// Toggle switch listener
const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);

// Pre-check the dark-theme checkbox if dark-theme is set
if (document.documentElement.getAttribute("data-theme") == "dark"){
    toggleSwitch.checked = true;
}</code>

HTML

Fügen Sie ein Kontrollkästchen zum Umschalten zwischen Themen hinzu:

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

Dieser Ansatz nutzt CSS-Variablen und JavaScript, um das bevorzugte Theme des Benutzers automatisch zu erkennen und es dynamisch anzuwenden. Es bietet dem Benutzer außerdem die Flexibilität, die Dunkelmodus-Einstellung für bestimmte Webanwendungen zu überschreiben.

Das obige ist der detaillierte Inhalt vonWie können Sie die Systemeinstellung „Prefers-Color-Schema“ für bestimmte Websites außer Kraft setzen und unabhängig von der Systemeinstellung des Dunkelmodus ein konsistentes Benutzererlebnis gewährleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!