Wie überschreibe ich die Einstellung des nativen Dunkelmodus und biete Benutzern eine flexible Anzeigesteuerung?

So überschreiben Sie die Einstellung für den nativen Dunkelmodus

Einführung

Mit der Verbreitung von Dunkelheit Um die verschiedenen Modi auf verschiedenen Plattformen zu nutzen, ist es wichtig, den Benutzern Flexibilität bei der Auswahl ihres bevorzugten Erscheinungsbilds zu bieten. In diesem Artikel geht es um die Herausforderung, die native Browsereinstellung zu überschreiben, um zwischen Dunkel- und Standardmodus umzuschalten, selbst wenn das System des Benutzers auf Dunkelmodus eingestellt ist.

CSS-Variablen und -Designs

Um ein umschaltbares Theme-System zu erstellen, können CSS-Variablen und Themes verwendet werden. Das Stammelement definiert Standardvariablen für den hellen Modus, während ein dediziertes dunkles Thema diese Variablen mit dunklen Werten überschreibt.

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

Elemente verweisen dann auf diese Variablen und sorgen so für ein konsistentes und globales Thema auf der gesamten Website.

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

JavaScript zur Erkennung und Umschaltung

Um das bevorzugte Theme des Benutzers automatisch zu erkennen oder die Systemeinstellung zu überschreiben, wird JavaScript eingesetzt. Die Funktion „DetectColorScheme“ prüft auf benutzerdefinierte Einstellungen im lokalen Speicher, auf Browserunterstützung für matchMedia oder auf die Dunkelmodus-Einstellungen des Systems.

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

Mit einem Kippschalter können Benutzer ihre Designeinstellungen manuell überschreiben. Die Funktion „switchTheme“ aktualisiert das Attribut „data-theme“ und legt eine Variable „localStorage“ fest, um die Einstellung über das Laden von Seiten hinweg beizubehalten.

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

Fazit

Durch die Kombination von CSS-Variablen werden Themen erstellt Mithilfe von JavaScript und JavaScript können Websites Benutzern eine anpassbare und benutzerzentrierte Oberfläche bieten, unabhängig von ihren Systempräferenzen oder Überschreibungswünschen. Diese Lösung ermöglicht die Koexistenz dunkler und heller Themen und sorgt gleichzeitig für ein konsistentes und kontrolliertes visuelles Erlebnis in der gesamten Anwendung.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich die Einstellung des nativen Dunkelmodus und biete Benutzern eine flexible Anzeigesteuerung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!