Dark Mode Implementierung: CSS, JavaScript und Systempräferenz

Was ist Dark Mode und warum ist er wichtig?

Dark Mode (dunkles Theme) ist ein Oberflächenmodus, der dunkle Hintergründe mit hellem Text anzeigt. Reduziert Augenbelastung in Umgebungen mit wenig Licht.

Auf OLED-Bildschirmen kann Dark Mode die Akkulaufzeit um 30-60% verlängern, da dunkle Pixel ausgeschaltet sind. Wichtiger Vorteil für Mobilgeräte.

Nutzerpräferenz: Mit systemweiter Dark Mode-Unterstützung (macOS, Windows, iOS, Android) erwarten Nutzer ein konsistentes Erlebnis in allen Anwendungen.

Barrierefreiheit: Manche Nutzer (Fotophobie, Migräne) bevorzugen dunkle Themes. Dark Mode bietet Barrierefreiheitsvorteile für diese Nutzer.

Theme-Verwaltung mit CSS-Variablen

CSS Custom Properties (Variablen) ermöglichen zentrale Verwaltung von Theme-Farben. Definieren Sie das Standard (Light) Theme in :root, Dark Theme in [data-theme="dark"].

Beispiel: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. Alle Styles nutzen diese Variablen.

Farbübergänge: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } sorgt für sanften Theme-Übergang.

Kontrastkontrolle: Befolgen Sie WCAG-Kontrastverhältnisse auch im Dark Mode. Heller Text auf dunklem Hintergrund erfordert 4.5:1 Kontrastverhältnis.

Schatten und Rahmen: Schatten (box-shadow) sind im Dark Mode weniger sichtbar. Verwenden Sie Rahmen (border), um Elementgrenzen deutlicher zu machen.

Theme-Wechsel mit JavaScript

Theme-Toggle-Button: Wenn Nutzer auf die Schaltfläche klickt, Theme wechseln mit document.documentElement.setAttribute('data-theme', 'dark').

Präferenz speichern: Speichern Sie die Auswahl des Nutzers mit localStorage.setItem('theme', 'dark'). Lesen Sie mit localStorage.getItem('theme') beim Laden der Seite.

FOUC-Vermeidung: Um Flash of Unstyled Content (FOUC) zu vermeiden, Theme-Einstellung mit Inline-Script in <head> anwenden. Bestimmt Theme vor dem Rendern.

Toggle-Funktion: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

Systempräferenz erkennen

prefers-color-scheme Media Query: Stile basierend auf Systempräferenz in CSS anwenden mit @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

Erkennung mit JavaScript: System-Dark-Mode-Präferenz prüfen mit window.matchMedia('(prefers-color-scheme: dark)').matches.

Änderungen überwachen: System-Theme-Änderungen verfolgen mit matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

Prioritätsreihenfolge: 1. Manuelle Nutzerauswahl (localStorage), 2. Systempräferenz (prefers-color-scheme), 3. Standard-Theme (light). In dieser Reihenfolge prüfen.

Dark Mode Best Practices

Verwenden Sie kein reines Schwarz (#000000). Sehr dunkles Grau (#121212 oder #1a1a1a) sieht besser aus und reduziert Augenbelastung.

Farbsättigung reduzieren. Helle Farben (Rot, Grün, Blau) im Dark Mode verursachen Augenbelastung. Verwenden Sie entsättigte Farben.

Bilder anpassen. Helle Bilder können im Dark Mode störend sein. Bilder leicht abdunkeln mit filter: brightness(0.8).

Alle Komponenten testen. Formulare, Tabellen, Code-Blöcke, Diagramme sollten im Dark Mode korrekt aussehen. Jede Komponente im Dark Mode prüfen.

Meta theme-color: Browser-UI (Adressleiste) Farbe an Dark Mode anpassen mit <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode in Frameworks

Tailwind CSS: Dark Mode Styles mit dark: Prefix definieren. Wie dark:bg-gray-900 dark:text-white. Manuelle Kontrolle mit Class-Strategie.

React: Einfache Dark Mode Implementierung mit useDarkMode Hook oder next-themes Bibliothek. SSR-kompatibles Theme-Management.

Vue: Reaktiver Dark Mode mit useDark Composable aus @vueuse/core. Automatische Systempräferenz-Erkennung.

Bootstrap: Bootstrap 5.3+ Dark Mode Unterstützung mit data-bs-theme="dark" Attribut. Theme-Management mit CSS-Variablen.