Dark Mode für Websites
Dark Mode richtig umsetzen: Vorteile für UX & Akku, CSS-Variablen, prefers-color-scheme, Theme-Toggle, Kontraste, Assets & Performance. Mit Beispielen, Checkliste und Tabelle.
Dark Mode ist längst mehr als ein Trend. Richtig umgesetzt verbessert er Lesbarkeit, Fokus, Akkulaufzeit – und vermittelt deiner Marke ein modernes, nutzerzentriertes Image. In diesem Leitfaden zeigen wir dir warum sich Dark Mode lohnt, wie du ihn sauber umsetzt (CSS/JS/Frameworks), welche Stolperfallen es gibt und liefern dir Codebeispiele plus eine kompakteTabelle.
Wir sind eine Agentur für Website-Erstellung, Relaunch, Onlineshop und individuelle Programmierung – wir bauen Dark-Mode-Lösungen, die schnell, zugänglich und wartbar sind.
.
Kurz & einfach erklärt (auch für Nicht-Techniker)
Dark Mode bedeutet: dunkle Hintergründe, helle Schrift – automatisch passend zur Systemeinstellung deiner Nutzer oder per Schalter auf der Website. Ergebnis: angenehmer Blick auf dem Sofa, weniger Blendung nachts, oft längere Akkulaufzeit auf OLED-Geräten und eine aufgeräumte Optik, die Inhalte in den Vordergrund stellt.
Vorteile auf einen Blick
Technische Grundlagen
1) Systempräferenz respektieren
Der einfachste Einstieg ist die Media Query prefers-color-scheme::root{
--bg: #ffffff; --fg:#111111; --brand:#0057ff; /* light defaults */
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0f1115; --fg:#e7eaf0; --brand:#6ea8ff; /* dunkle Tokens */
}
}
body{ background:var(--bg); color:var(--fg); }
a{ color:var(--brand); }
Tipp: Setze zusätzlich
color-scheme: light dark;aufhtml, damit Browser Form Controls, Scrollbars & den Datepicker automatisch passend stylen.html{ color-scheme: light dark; }
2) Theme-Toggle & Persistenz
Viele Nutzer möchten übersteuern – bau einen Umschalter, der die Wahl speichert.<button id="themeToggle" aria-pressed="false" aria-label="Dark Mode umschalten">🌓</button>
<script>
(function(){
const pref = localStorage.getItem('theme');
const sys = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const theme = pref || sys;
document.documentElement.dataset.theme = theme; // vermeidet Theme-Flicker
})();
document.getElementById('themeToggle').addEventListener('click', ()=>{
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
});
</script>
<style>
:root{ --bg:#fff; --fg:#111; --brand:#0057ff; }
:root,[data-theme="light"]{ --bg:#fff; --fg:#111; --brand:#0057ff; }
[data-theme="dark"]{ --bg:#0f1115; --fg:#e7eaf0; --brand:#6ea8ff; }
body{ background:var(--bg); color:var(--fg); }
</style>
Flicker vermeiden (FART): Das kleine IIFE gehört in den
<head>, damit das Attribut gesetzt ist, bevor der Browser rendert.
3) Assets, Logos & Bilder
-
SVG-Icons mit
currentColoreinfärben, statt PNGs zu invertieren. -
Logo in heller und dunkler Variante vorhalten; per CSS/
<picture>wechseln. -
Bilder nicht pauschal invertieren (verfälscht Motive). Für Diagramme dunkle Paletten nutzen.
4) Kontraste & Lesbarkeit
-
Zielwerte nach WCAG: 4.5:1 (Normaltext), 3:1 (Großtext).
-
Kein „absolutes Schwarz“: #000 → oft zu hart. Bewährt: #0e0f12 bis #121212 als Grundfläche.
-
Deutliche Fokus-States (Tastatur!), klare Hover/Active-Farben, erkennbarer Linkstil.
5) Performance & SEO
-
Ein CSS – zwei Themes via CSS-Variablen; vermeide doppelte Styles.
-
Critical CSS inline, Theme-Schalter ohne große JS-Frameworks.
-
Structured Data / SEO bleiben unverändert; achte nur auf Logo-Variante in Markups und Meta
theme-color(Browser UI-Farbe).<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f1115" media="(prefers-color-scheme: dark)">
6) Framework-Tipps
-
Tailwind:
dark:-Klassen, Modusclass+<html class="dark">oder Media. -
Next.js/Nuxt: Toggle im Layout; „no-flash“ per Head-Script +
data-theme. -
Design-Systeme (z. B. Chakra/MUI): Tokens/Theme-Provider konsequent nutzen.
Typische Stolperfallen
-
Reines Invertieren der Seite → liefert falsche Farben/Bilder. Besser: Farb-Tokens definieren.
-
Kontraste zu schwach → Texte „grauen“ aus. Fix: Kontrast messen, Grautöne anheben.
-
Theme-Flicker beim Laden → Fix: Early-Init-Script im
<head>,data-themesetzen. -
Unlesbare Charts/Codes → dedizierte Dark-Paletten & Code-Themes (z. B. Prism).
-
Externe Embeds (Maps, Video) zu hell → Lite-Embeds mit dunklem Placeholder, wenn möglich Dark-Theme wählen.
Kurze Beispiele
-
Blog/Magazin: Leser verbringen viel Zeit auf Text. Dark Mode steigert Lesekomfort abends, Rückmeldungen & Verweildauer verbessern sich.
-
SaaS-Dashboard: Tabellen/Karten/Charts – Dark Mode fokussiert auf Daten, weniger Augenmüdigkeit bei langen Sessions.
-
Onlineshop: Produktkarten bleiben hell hinterlegt, Seite drumherum dunkel → klare Hierarchie, höhere Produktwirkung.
Dark Mode umsetzen
| Bereich | Best Practice | Beispiel |
|---|---|---|
| Farbsystem | Tokens fuer Flaechen/Text/Brand/Status anlegen | --bg, --fg, --brand, --muted |
| Schalter + State | Toggle + Persistenz + Early Init | data-theme + localStorage |
| Assets + SEO | Logo hell/dunkel, theme-color, kein Invert | picture fuer Logos, Meta oben |
| Kontrast + A11y | WCAG, sichtbarer Fokus, Linkstil | 4.5:1 Normaltext, 3:1 Grosstext |
| Embeds + Charts | Lite-Embeds, dunkle Paletten | YouTube-Poster, Chart-Palette |
| Performance | Ein Stylesheet, Variablen, kein JS-Overhead | Critical CSS + Head-Snippet |
Dark Mode: Qualitätscheck
prefers-color-scheme respektiertdata-theme Early-Init ohne Flickermeta theme-color pro ThemeFazit zum Dark Mode
Ein gut gebauter Dark Mode schafft Komfort und Qualität, ohne deine Performance oder Wartbarkeit zu belasten. Mit CSS-Variablen, Systempräferenz und einem leichten Theme-Toggle bist du in wenigen Schritten produktionsreif. Der Rest ist Feinschliff: Kontraste, Assets und kleine Details, die große Wirkung entfalten.
Wir übernehmen Konzeption, Umsetzung und Testing.
