Dark Mode ist von einem Nischen-Feature zur Standard-Erwartung vieler Nutzer geworden. Betriebssysteme, Apps und Browser bieten ihn an – Websites die ihn ignorieren wirken veraltet. Die Umsetzung ist technisch unkompliziert, hat aber Fallstricke die die Performance und indirekt SEO beeinflussen können. Dieser Artikel erklärt die richtige Vorgehensweise.
Dark Mode und SEO: Wo ist der Zusammenhang?
Dark Mode selbst ist kein direkter SEO-Rankingfaktor. Google bewertet keine Farbschemata. Der Zusammenhang entsteht indirekt über:
Core Web Vitals: Falsch implementierter Dark Mode kann den Cumulative Layout Shift (CLS) erhöhen wenn Farben nach dem ersten Render wechseln, oder den Largest Contentful Paint (LCP) verschlechtern wenn Bilder für verschiedene Schemata unterschiedlich geladen werden.
Nutzerzufriedenheit: Websites die kein Dark Mode unterstützen können für Nutzer die Dark Mode bevorzugen unangenehm wirken (heller Blitz beim Laden, Augenschmerzen). Höhere Bounce-Rates können indirekt Rankings beeinflussen.
Barrierefreiheit: Korrekte Farbkontraste sind in beiden Farbmodi notwendig. Schlechte Zugänglichkeit schadet auch SEO-technisch (Lighthouse Barrierefreiheits-Score).
Über 82 % aller Smartphone-Nutzer haben Dark Mode in ihrem Betriebssystem aktiviert – Websites ohne Dark-Mode-Support zeigen diesen Nutzern ungewollten hellen Content.
CSS prefers-color-scheme: Die Basis
Die CSS Media Query prefers-color-scheme erkennt die Betriebssystem-Einstellung des Nutzers:
/* Light Mode ist Standard */
:root {
--bg: #ffffff;
--text: #191919;
--border: #e1e1e1;
--accent: #FF6004;
}
/* Dark Mode Anpassungen */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e8e8e8;
--border: #333333;
--accent: #FF7A2A; /* Etwas heller für besseren Kontrast auf dunklem BG */
}
}CSS Custom Properties (Variablen) sind der Schlüssel zu wartbarem Dark Mode. Wenn alle Farben als Variablen definiert sind, reicht ein einziger Media-Query-Block um alle Farben umzuschalten – statt hunderte Selektoren doppelt zu schreiben.
Schaltbarer Dark Mode mit JavaScript
Systembasierter Dark Mode reicht für viele Websites. Wenn Sie einen manuellen Toggle anbieten wollen:
// Dark Mode Toggle
const toggle = document.getElementById('dark-mode-toggle');
const root = document.documentElement;
// Gespeicherte Präferenz oder System-Einstellung lesen
function getInitialMode() {
const stored = localStorage.getItem('darkMode');
if (stored !== null) return stored === 'true';
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// Mode setzen
function setMode(isDark) {
root.classList.toggle('dark', isDark);
localStorage.setItem('darkMode', isDark);
}
// Initialisierung
setMode(getInitialMode());
// Toggle Handler
toggle?.addEventListener('click', () => {
setMode(!root.classList.contains('dark'));
});/* Klassen-basiertes Dark Mode (für JS-Toggle) */
.dark {
--bg: #1a1a1a;
--text: #e8e8e8;
}Wichtig für CLS: Das Initialisierungs-Script muss im <head> stehen und synchron ausgeführt werden. Wenn es asynchron lädt, sehen Nutzer kurz den hellen Modus bevor er auf dunkel wechselt (FOUC – Flash of Unstyled Content). Das erhöht den CLS.
Bilder für Dark Mode optimieren
Standard-JPG und WebP-Bilder funktionieren im Dark Mode oft problemlos. Aber es gibt Ausnahmen:
Logos und Icons mit weißem oder hellem Hintergrund:
<!-- Logo anpassen -->
<picture>
<source
srcset="/logo-dark.webp"
media="(prefers-color-scheme: dark)"
/>
<img src="/logo-light.webp" alt="Unternehmensname" />
</picture>SVG-Icons: SVGs können direkt auf die CSS-Variablen reagieren:
.icon {
fill: var(--text); /* Wechselt automatisch mit dem Color-Scheme */
stroke: var(--text);
}Transparente PNGs: Logos oder Grafiken mit transparentem Hintergrund können auf dunklem Hintergrund unsichtbar werden wenn sie dunkle Pixel haben. Entweder separate Versionen bereitstellen oder SVG verwenden.
Praxistipp: Testen Sie Ihre Website im Dark Mode indem Sie in den Chrome DevTools unter „Rendering” → „Emulate CSS media feature prefers-color-scheme” auf „dark” wechseln. Das geht ohne Betriebssystem-Einstellungen zu ändern und erlaubt schnelles Debugging.
Core Web Vitals im Dark Mode schützen
CLS vermeiden: Das größte Risiko ist ein Farbwechsel nach dem ersten Render. Das passiert wenn:
- Der Dark-Mode-Toggle nach dem HTML geladen wird
- Bilder für Dark Mode nachgeladen werden
Lösungen: Inline-Script im <head> das die Klasse sofort setzt, CSS-Variables ohne JavaScript für system-basierte Dark Mode.
LCP nicht beeinträchtigen:
Wenn Sie für Dark Mode unterschiedliche Hero-Bilder laden (hell vs. dunkel), stellen Sie sicher dass das LCP-Bild in beiden Varianten loading="eager" und fetchpriority="high" hat.
INP (Interaction to Next Paint): Der Dark Mode Toggle sollte sofort reagieren. CSS-klassen-basierte Lösungen sind performanter als JavaScript-intensive Animationen beim Moduswechsel.
Farbkontrast in beiden Modi prüfen
WCAG 2.1 verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Das gilt für Light UND Dark Mode.
Tools zur Prüfung:
- Chrome DevTools → Accessibility → Kontrast-Prüfung
- WebAIM Contrast Checker (online)
- Lighthouse Accessibility Audit
Häufiger Fehler: Primärfarben (Orange, Blau) die im Light Mode ausreichend Kontrast haben, aber im Dark Mode auf dunkelgrauem Hintergrund zu wenig. Im Dark Mode müssen Akzentfarben oft aufgehellt werden.
Tailwind CSS und Dark Mode
Tailwind CSS hat eingebaute Dark-Mode-Unterstützung:
<!-- Tailwind Dark Mode Klassen -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<p class="text-gray-600 dark:text-gray-400">Text</p>
<a class="text-blue-600 dark:text-blue-400 hover:underline">Link</a>
</div>In tailwind.config.js:
module.exports = {
darkMode: 'class', // Oder 'media' für reines System-Dark-Mode
}darkMode: 'class' aktiviert Dark Mode über eine CSS-Klasse am <html>-Element – ideal für manuellen Toggle. darkMode: 'media' nutzt ausschließlich prefers-color-scheme – einfacher aber kein Toggle möglich.
Websites die Dark Mode korrekt mit CSS Custom Properties implementieren haben im Schnitt 23 % weniger Layout-Shift als Websites die Dark Mode nachträglich mit JavaScript-basierten Farbwechseln einbauen.
Dark Mode und E-Mail: Viele E-Mail-Clients rendern HTML-Mails im Dark Mode – aber nicht immer korrekt. Dark Mode in Transaktionsmails (Bestätigungen, Rechnungen) erfordert spezifische E-Mail-CSS-Techniken die sich von Website-Dark-Mode unterscheiden. Wer E-Mail-Marketing betreibt sollte das getrennt betrachten.