CSS Dark Mode

Der Dark Mode wird im Webdesign immer beliebter, da er die Augenbelastung verringert und Seiten ein modernes Erscheinungsbild verleiht. Mit CSS können wir automatisch oder manuell zwischen hellem und dunklem Theme wechseln.

Automatischer Dark Mode mit Media Query

Die Media Query <prefers-color-scheme> ermöglicht es, dass die Seite automatisch je nach Systemeinstellung des Benutzers zwischen hellem und dunklem Modus wechselt.

Dieses Beispiel zeigt, wie der Dark Mode automatisch basierend auf den Betriebssystemeinstellungen des Benutzers angewendet wird.

Manueller Dark Mode mit Klassen

Neben dem automatischen Wechsel gibt es auch manuelle Lösungen, bei denen mit JavaScript Klassen zum body-Element hinzugefügt oder entfernt werden.

In diesem Beispiel kann der helle und dunkle Modus manuell mit CSS-Klassen gesteuert werden.

Tipps zur Verwendung des Dark Mode

Bei der Implementierung des Dark Mode sollte darauf geachtet werden, dass der Inhalt weiterhin gut lesbar ist und Barrierefreiheitsstandards erfüllt.

• Überprüfe immer den Kontrast zwischen Text und Hintergrund.
• Biete den Benutzern auch eine manuelle Umschaltmöglichkeit.
• Teste den Dark Mode auf verschiedenen Geräten und Browsern.