Dark-Mode-Generator
Aus einem hellen Farbschema automatisch ein dunkles ableiten, Kontraste prüfen und CSS mit prefers-color-scheme, data-theme oder light-dark() kopieren.
Der Dark-Mode-Generator leitet aus einem hellen Farbschema automatisch ein dunkles ab. Neutrale Töne werden im OKLCH-Farbraum abgedunkelt, Akzentfarben aufgehellt, bis sie auf dem dunklen Grund genug Kontrast haben. Jede Farbe lässt sich anpassen. Ausgabe als CSS mit prefers-color-scheme, data-theme-Umschalter oder light-dark(), inklusive Kontrastprüfung.
Hell
Karte mit Inhalt
Gedämpfter Beschreibungstext.
Dunkel
Karte mit Inhalt
Gedämpfter Beschreibungstext.
Kontrast hell
- Text auf Hintergrund 17,85 : 1 ✓
- Gedämpfter Text 4,76 : 1 ✓
- Primärfarbe auf Hintergrund 5,17 : 1 ✓
Kontrast dunkel
- Text auf Hintergrund 16,22 : 1 ✓
- Gedämpfter Text 8,16 : 1 ✓
- Primärfarbe auf Hintergrund 7,44 : 1 ✓
:root {
color-scheme: light;
--color-background: #ffffff;
--color-surface: #f8fafc;
--color-text: #0f172a;
--color-muted: #64748b;
--color-border: #e2e8f0;
--color-primary: #2563eb;
--color-accent: #db2777;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-background: #121212;
--color-surface: #1c1d1e;
--color-text: #e8effc;
--color-muted: #a3acb8;
--color-border: #36383b;
--color-primary: #73a2ff;
--color-accent: #ff689e;
}
}
[data-theme="dark"] {
color-scheme: dark;
--color-background: #121212;
--color-surface: #1c1d1e;
--color-text: #e8effc;
--color-muted: #a3acb8;
--color-border: #36383b;
--color-primary: #73a2ff;
--color-accent: #ff689e;
}
body {
background: var(--color-background);
color: var(--color-text);
}Dark Mode mit CSS-Variablen
Der Kern jedes Dark Modes sind Farbvariablen: Komponenten nutzen nur var(--color-background) oder var(--color-text), und für das dunkle
Theme werden lediglich die Werte ausgetauscht.
| Umsetzung | Steuerung | JavaScript |
|---|---|---|
prefers-color-scheme | Systemeinstellung | Nein |
[data-theme="dark"] | Umschalter auf der Seite | Ja |
| System + Umschalter | System, manuell überschreibbar | Ja |
light-dark() | Systemeinstellung bzw. color-scheme | Optional |
Weitere Farben als Variablen legst du im CSS-Farbvariablen-Generator an, einzelne Kontraste prüfst du im Farbkontrast-Prüfer.
Häufige Fragen
Warum nicht einfach die Farben invertieren?
Invertierte Farben wirken grell und verfälschen Markenfarben. Gute dunkle Themes nutzen kein reines Schwarz, sondern ein sehr dunkles Grau, und hellen Akzentfarben etwas auf, damit sie auf dunklem Grund lesbar bleiben.
Welche Umsetzung soll ich wählen?
„System + Umschalter“ folgt standardmäßig der Systemeinstellung und erlaubt trotzdem eine manuelle Wahl, die im Browser gespeichert wird. Ohne Umschalter reicht prefers-color-scheme. light-dark() ist am kürzesten, braucht aber aktuelle Browser.
Was macht color-scheme?
color-scheme teilt dem Browser mit, ob die Seite hell oder dunkel ist. Er passt dann Formularfelder, Scrollleisten und den Standardhintergrund an. Ohne die Angabe erscheinen im dunklen Theme oft weiße Eingabefelder.
Welche Kontraste brauche ich?
Normaler Text braucht nach WCAG mindestens 4,5 : 1, große Schrift und Bedienelemente 3 : 1. Die Tabelle zeigt die wichtigsten Paare für beide Themes.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.