Dunkles Design mit CSS
In den letzten Jahren ist der Dark Mode zu einem integralen Bestandteil des modernen Webdesigns geworden. Er reduziert nicht nur die Augenbelastung beim Arbeiten unter schwachen Lichtverhältnissen, sondern spart auch Akkuleistung bei Geräten mit OLED-Displays. Die Implementierung eines dunklen Designs auf einer Website mittels CSS ist relativ einfach, muss aber korrekt umgesetzt werden, damit Benutzer problemlos zwischen heller und dunkler Version wechseln können.
Grundprinzipien der Arbeit mit Designs
Dunkle und helle Designs sind zwei Sätze von Stilen, die dynamisch auf Website-Elemente angewendet werden können. Idealerweise sollten Benutzer die Möglichkeit haben, selbst zu wählen, welches Design sie verwenden möchten, aber auch die Systemeinstellungen des Betriebssystems können berücksichtigt werden.
Es gibt zwei Hauptmethoden zur Implementierung eines dunklen Designs:
- Verwendung von CSS-Variablen und Umschalten der Stile mittels JavaScript
- Automatische Anwendung des Designs basierend auf Systemeinstellungen mittels
prefers-color-scheme
Beide Ansätze können kombiniert werden, um die Design-Handhabung flexibler zu gestalten.
Verwendung von CSS-Variablen für das Design
Eine der praktischsten Methoden zur Implementierung eines dunklen Designs ist die Verwendung von CSS-Variablen (custom properties). Dies ermöglicht eine einfache Verwaltung von Farben und anderen Stilparametern.
Zunächst erstellen wir Root-Variablen in :root, die im gesamten Dokument verwendet werden:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
}
Dann wenden wir diese Variablen auf die Seitenelemente an:
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
Jetzt muss nur noch die Klasse .dark-theme zu <html> oder <body> hinzugefügt werden, um die Farben zu ändern.
Designs mit JavaScript umschalten
Um Benutzern das Umschalten zwischen hellem und dunklem Design zu ermöglichen, können Sie JavaScript verwenden:
const toggleThemeBtn = document.getElementById('theme-toggle');
toggleThemeBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-theme');
// Speichern der Benutzerauswahl im localStorage
if (document.documentElement.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Gespeicherte Einstellungen beim Laden der Seite prüfen
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark-theme');
}
Auf diese Weise bleibt die Auswahl des Benutzers auch nach dem Neuladen der Seite erhalten.
Automatische Erkennung des System-Designs
Wenn Sie die Systemeinstellungen des Benutzers berücksichtigen möchten, können Sie prefers-color-scheme verwenden. Diese Medienabfrage wendet automatisch das entsprechende Design an:
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
Diese Methode ist praktisch, da sie die Website sofort an die Systemeinstellungen anpasst. Wenn der Benutzer jedoch ein Design manuell auswählen möchte, müssen Sie diesen Ansatz mit JavaScript kombinieren.
Kombination von automatischer Erkennung und manueller Auswahl
Um beide Methoden zu berücksichtigen, können Sie zunächst prüfen, ob eine gespeicherte Design-Auswahl im localStorage vorhanden ist. Falls nicht, werden die Systemeinstellungen angewendet:
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
if (userTheme) {
document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}
Erstellen eines benutzerfreundlichen Umschalters
Nun fügen wir einen Design-Umschaltknopf in HTML hinzu:
<button id="theme-toggle">Design umschalten</button>
Der Button ermöglicht dem Benutzer das manuelle Ändern des Designs, und die Logik zum Speichern der Auswahl macht die Interaktion komfortabel.
Verbesserung der Übergangsanimationen
Um den Design-Wechsel sanft erscheinen zu lassen, können Sie eine Animation hinzufügen:
* {
transition: background-color 0.3s, color 0.3s;
}
Dies erzeugt einen weichen Abdunkelungs- oder Aufhellungseffekt beim Umschalten der Designs.
Beispiel für Hell-Dunkel-Design-Umschaltung
Fazit
Die Implementierung eines dunklen Designs auf einer Website mittels CSS und JavaScript ist eine relativ einfache, aber wichtige Aufgabe. Die Verwendung von CSS-Variablen macht den Code praktisch und skalierbar, während die Kombination von prefers-color-scheme und localStorage den Benutzern Flexibilität bei ihrer Auswahl bietet. Als Ergebnis wird die Website adaptiv und bei allen Lichtverhältnissen angenehm zu benutzen sein.