Einführung

Dunkelmodus ist eine Anzeigeeinstellung, die einen dunklen Hintergrund mit hellem Text und hellen Elementen verwendet. Es hat an Popularität gewonnen, weil es gut aussieht und mehrere praktische Vorteile bietet.

Zu den Vorteilen des Dunkelmodus gehören:

1. Reduzierte Augenbelastung: Der Dunkelmodus kann die Augen schonen, insbesondere in Umgebungen mit wenig Licht, da er die Menge an hellem Licht reduziert, das von Bildschirmen abgegeben wird.
2. Verbesserte Akkulaufzeit auf OLED-Bildschirmen: Auf OLED-Bildschirmen (Organic Light Emitting Diode) kann der Dunkelmodus die Akkulaufzeit verlängern, da schwarze Pixel im Wesentlichen ausgeschaltet sind und im Vergleich zur Anzeige heller Farben weniger Strom verbrauchen.

In diesem Tutorial erfahren Sie, wie Sie Ihre Website mithilfe von CSS und JavaScript in den Dunkelmodus schalten. Wir beginnen mit einer einfachen Webseitenvorlage mit hellem Thema und verwandeln sie in eine Website mit einem umschaltbaren Hell-/Dunkel-Modus, sodass Benutzer reibungslos zwischen hellen und dunklen Themen wechseln können.

Einrichten des Projekts

Beginnen wir mit einer einfachen Webseitenvorlage mit hellem Thema. Anschließend verwandeln wir es in eine Website mit einem umschaltbaren Hell-/Dunkel-Modus, sodass Benutzer zwischen hellen und dunklen Themen wechseln können.

Implementieren von Dark-Mode-Stilen

Auswahl der Farben

Der erste Schritt besteht darin, alle von uns verwendeten Farben aufzulisten und für jede eine Version mit dunklem Thema auszuwählen. In der Tabelle unten habe ich alle Farben auf der Seite und ihre entsprechenden dunklen Versionen aufgelistet.

Benutzerdefinierte Variablen

Wir verwenden dann CSS-Variablen, um mit diesen Variablen eine dunkle und eine helle Klasse für den Körper zu erstellen.

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

Informationen zu CSS-Variablen finden Sie unter „Benutzerdefinierte CSS-Eigenschaften verwenden“. Im Wesentlichen handelt es sich dabei um Entitäten, die durch zwei Bindestriche (--) definiert werden und Werte zur Wiederverwendung in einem Dokument speichern. CSS-Variablen erleichtern die Wartung, indem sie die automatische Aktualisierung von Änderungen ermöglichen.

Dynamische Elementfarben

Wir verwenden die CSS-Funktion var(), um die Werte der CSS-Variablen einzufügen. Auf diese Weise können wir die Farbe dynamisch ändern und eine Variable aktualisieren, um Änderungen im gesamten Dokument widerzuspiegeln, anstatt jede einzelne manuell zu ändern.

Hier ist ein Beispiel für das Navigationselement und seine untergeordneten Elemente:

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

Schalten Sie den Hell-/Dunkelmodus mit JavaScript um

Jetzt können wir die Klasse des Körpers in dunkel oder hell ändern, um das Thema zu ändern. Fügen Sie zunächst eine Schaltfläche zum Header hinzu und legen Sie die Funktion „changeTheme()“ für das Klickereignis fest:

Definieren Sie die Funktion changeTheme(), die die Klasse des Körpers umschaltet:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

Und jetzt können Benutzer das Thema der Website ändern, indem sie auf die Schaltfläche klicken.

Sie können den Code des Tutorials im CodePen unten sehen

Nächste Schritte

Darüber hinaus können Sie die Designpräferenz des Benutzers im lokalen Speicher speichern. Durch die Aktualisierung der Funktion „changeTheme()“, um das ausgewählte Thema zu speichern und beim Laden der Seite darauf zu prüfen, wird sichergestellt, dass die Auswahl des Benutzers gespeichert und bei seinem nächsten Besuch automatisch angewendet wird.

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

Hinzufügen des Farbschemas: dunkel; Die Eigenschaft kann im dunklen Design auch dafür sorgen, dass der Stil einiger Elemente, deren Stil sonst schwer zu gestalten ist, vom Browser geändert wird.

body.dark {
  color-scheme: dark;
}

Abschluss

Zusammenfassend lässt sich sagen, dass das Hinzufügen des Dunkelmodus zu Ihrer Website das Benutzererlebnis verbessern kann, indem die Belastung der Augen verringert und die Akkulaufzeit auf OLED-Bildschirmen verlängert wird. Wenn Sie dieser Anleitung folgen, können Sie mithilfe von CSS und JavaScript ganz einfach einen Hell-Dunkel-Modus-Umschalter einrichten. Passen Sie den Dunkelmodus an Ihr Design an.

Teilen Sie Ihre Implementierungen mit oder stellen Sie Fragen in den Kommentaren unten.