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.
Dark Mode oder durchdachte UX für Ihre Seite?
Über den Autor
Wir bauen schnelle Websites, Web/Mobile-Apps, KI-Chatbots und Hosting — mit Fokus auf SEO und Conversion.
Empfohlene Links
Von Theorie zu Produktion — Branchly, Hosting-Stack und Referenzen.