Kurzfassung
Dark Mode ist eine erwartete Funktion auf Websites und in Apps. Die Umsetzung basiert auf Systemeinstellungen (prefers-color-scheme), CSS-Variablen und optional einem Schalter. Gut umgesetzt verbessert er UX und reduziert Augenbelastung.
Für wen ist das
- Betreiber von Websites und Web-Apps
- Frontend-Entwickler, die Dark Mode planen
- Alle, die Barrierefreiheit und Benutzerpräferenzen berücksichtigen
Keyword (SEO)
dark mode website, dark mode implementierung, prefers-color-scheme, dark mode ux
Warum Dark Mode?
- Benutzerpräferenz – viele Nutzer haben Dark Mode im OS aktiviert
- Weniger Augenbelastung – bei längerem Lesen und abends
- Konsistenz mit dem System – die Seite sticht nicht bei dunklem OS-UI hervor
- Akku – auf OLED-Displays verbraucht dunkles UI weniger Strom
Implementierung Schritt für Schritt
1. Systempräferenz erkennen
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e5e5e5;
--accent: #3b82f6;
}
}
2. CSS-Variablen (Theme-Tokens)
:root {
--bg: #ffffff;
--text: #171717;
--accent: #2563eb;
}
[data-theme="dark"] {
--bg: #0f0f0f;
--text: #fafafa;
--accent: #60a5fa;
}
3. Schalter + Speicherung in localStorage
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Beim Laden: localStorage prüfen, dann prefers-color-scheme
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(saved || (prefersDark ? 'dark' : 'light'));
Best Practices
- Nicht nur invertierte Farben – Kontrast und Nuancen anpassen (z. B. Hintergründe nicht reines #000)
- Bilder und Logo – Varianten für dunklen Hintergrund oder dezenten Hintergrund hinter Bildern erwägen
- Schalter beibehalten – auch bei prefers-color-scheme wollen Nutzer ggf. überschreiben
- Kontrast testen – WCAG gilt weiterhin (min. 4,5:1 für Text)
Checkliste
- CSS-Variablen für Farben (bg, text, border, accent)
- Unterstützung für
prefers-color-scheme - Optionaler Schalter mit Speicherung in localStorage
- Kein Flackern beim ersten Laden (Skript im head oder inline critical)
- Test auf Geräten mit aktiviertem Dark Mode
FAQ
Beeinflusst Dark Mode SEO?
Die Farben selbst nicht. Er kann UX-Metriken verbessern (Verweildauer, Absprung), wenn Nutzer den dunklen Modus bevorzugen.
Brauche ich einen Schalter?
Nein. Es reicht, prefers-color-scheme zu berücksichtigen. Ein Schalter gibt Nutzern die Kontrolle und wird oft geschätzt.
Wie vermeide ich Flackern beim Laden?
Kleines Skript in <head>, das vor dem ersten Rendern data-theme aus localStorage oder prefers-color-scheme setzt, danach den Rest laden.