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

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

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

JavaScript für die Themenerkennung und -umschaltung

Fügen Sie im Header-Bereich Ihres HTML Folgendes hinzu: JavaScript zum Erkennen des bevorzugten Themas des Benutzers:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

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

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML für Theme-Umschaltung

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

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