Wie man ein dunkles Thema mit CSS-Variablen erstellt und anpasst

Der Dunkelmodus ist bei den Nutzern aufgrund seiner Fähigkeit, die Augenbelastung zu reduzieren, insbesondere bei schwachem Licht, populär geworden. Mit CSS-Variablen ist die Erstellung und Anpassung eines Dunkelmodus viel einfacher geworden. Dies ermöglicht es Entwicklern, Farbpaletten einfach zu verwalten, ohne die Stile für jedes Element neu schreiben zu müssen.

CSS-Variablen: Grundlagen

CSS-Variablen, auch bekannt als benutzerdefinierte Eigenschaften, ermöglichen es, Werte in Variablen zu speichern, die dann in Stilen verwendet werden können. Sie werden mit zwei Bindestrichen vor dem Variablennamen definiert, zum Beispiel --primary-color. Dies ist besonders nützlich für die Erstellung von Themen, da alle Farbwerte an einem Ort gespeichert und leicht geändert werden können.

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

In diesem Beispiel deklarieren wir zwei Variablen: --background-color und --text-color, die die Farbpalette für den hellen Modus definieren.

Erstellung eines Dunkelmodus

Um einen Dunkelmodus zu erstellen, können wir ein anderes Set von Variablen definieren, die verwendet werden, wenn der Dunkelmodus aktiviert wird. Dies ermöglicht es, einfach zwischen den Themen zu wechseln, indem nur die Werte der Variablen geändert werden.

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

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

Jetzt, wenn die Klasse dark-theme zum body-Element hinzugefügt wird, ändern sich die Farben entsprechend den definierten Variablen für den Dunkelmodus.

Anpassung des Themas mit JavaScript

Für das dynamische Umschalten zwischen hellem und dunklem Modus kann JavaScript verwendet werden. Dies ermöglicht es den Nutzern, ihr gewünschtes Thema selbst auszuwählen.

const toggleThemeButton = document.querySelector('#toggle-theme');
toggleThemeButton.addEventListener('click', () => {
  document.body.classList.toggle(dark-theme);
});

In diesem Beispiel wird beim Klicken auf die Schaltfläche mit der ID toggle-theme die Klasse dark-theme zum body-Element hinzugefügt oder entfernt, wodurch das entsprechende Thema aktiviert wird.

Zusätzliche Anpassungen

Es kann auch die Speicherung der Benutzerauswahl im localStorage hinzugefügt werden, um die Einstellungen auch nach einem Neuladen der Seite zu bewahren. Dies verbessert die Benutzererfahrung, indem individuelle Einstellungen gespeichert werden.

const currentTheme = localStorage.getItem(theme);
if (currentTheme) {
  document.body.classList.add(currentTheme);
}

toggleThemeButton.addEventListener(click, () => {
  document.body.classList.toggle(dark-theme);
  const theme = document.body.classList.contains(dark-theme) ? dark-theme: light-theme;
  localStorage.setItem(theme, theme);
});

Jetzt wird das vom Benutzer gewählte Thema nach dem Neuladen der Seite automatisch angewendet. Die Anpassung des Dunkelmodus mit CSS-Variablen und JavaScript ist eine einfache und effektive Möglichkeit, die Benutzeroberfläche einer Website zu verbessern.