Wie kann ich mithilfe von CSS-Variablen und JavaScript einen anpassbaren Dunkelmodus für meine Website erstellen?

Anpassen des Dunkelmodus mit CSS-Variablen und JavaScript

Die Implementierung eines Dunkelmodus für Ihre App oder Website ist entscheidend für die Bereitstellung eines nahtlosen Benutzererlebnisses. Native CSS-Medienregeln bieten Browsern die Möglichkeit, vom System festgelegte Dunkelmodi zu erkennen. Benutzer bevorzugen jedoch möglicherweise ein anderes Design für bestimmte Websites oder Browser, die dies noch nicht unterstützen, z. B. Microsoft Edge.

Zur Adressierung Dadurch können wir CSS-Variablen und JavaScript verwenden, um Designeinstellungen zu verwalten.

CSS-Anpassung mit Variablen und Designs

Definieren Sie CSS-Variablen auf der Stamm- oder Standardebene und geben Sie sie an ein dunkles Theme:

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}</code>

Rufen Sie die Variablen dort auf, wo sie benötigt werden, um Stile dynamisch anzupassen.

JavaScript für Theme-Erkennung und -Umschaltung

In der Kopfzeile Fügen Sie im Abschnitt Ihres HTML-Codes JavaScript hinzu, um das bevorzugte Design des Benutzers zu erkennen:

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

Verwenden Sie JavaScript, um zwischen hellen und dunklen Designs umzuschalten:

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

function switchTheme(e) {
    ...
}

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

HTML zum Umschalten von Designs

Erstellen Sie ein HTML-Kontrollkästchen für den benutzergesteuerten Theme-Wechsel:

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

Mit diesem Ansatz können Sie das Theme des Benutzers automatisch erkennen, ihm erlauben, es zu überschreiben und ein individuelles Design bereitzustellen Erfahrung über Browser und Plattformen hinweg.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS-Variablen und JavaScript einen anpassbaren Dunkelmodus für meine Website erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!