Dark Mode ist keine zweite Farbpalette, sondern dieselbe Seite bei anderem Licht. Wer nur Schwarz und Weiß tauscht, bekommt graue Flächen, unlesbare Ränder und Bilder, die aus der Seite herausleuchten. Dieser Leitfaden zeigt, wie du den dunklen Modus über Rollen aufbaust, ihn ohne Flackern umschaltest und die Stellen prüfst, an denen es fast immer klemmt.
- Nicht Farben umschalten, sondern Rollen. Hintergrund, Fläche, Text und Rand bekommen je Modus einen Wert.
- Reines Schwarz ist selten richtig. Ein sehr dunkles Grau wirkt ruhiger und lässt Flächen überhaupt erst sichtbar werden.
- Schatten funktionieren im Dunkeln nicht. Tiefe entsteht dort über hellere Flächen, nicht über dunklere Kanten.
- Die Einstellung des Systems ist die Vorgabe, die Auswahl des Nutzers schlägt sie. Beides zusammen braucht eine Zeile im head, sonst flackert die Seite beim Laden.
Rollen statt Farbwerte
Der häufigste Fehler steht schon im Markup: An jedem Element hängen zwei Farben, eine für hell und eine für dunkel. Bei zwanzig Komponenten sind das vierzig Entscheidungen, die niemand zusammenhält.
Sauberer ist eine Schicht dazwischen. Du benennst, wofür eine Farbe da ist, nicht welche sie ist: Grund für die Seite, Fläche für alles, was darauf liegt, Text für die Schrift, Rand für die Trennung. Diese Rollen bekommen je Modus einen Wert, und die Komponenten kennen nur noch die Rolle.
Der Gewinn zeigt sich beim nächsten Wunsch. Soll das Dunkle einen Tick wärmer werden, änderst du vier Werte an einer Stelle statt vierzig im Code verteilt.
- primaryPrimärfarbe#1f5eff
- surfaceFläche#f8fafc
- textText#0f172a
- borderRand#e2e8f0
Links viele einzelne Farbwerte, rechts vier Rollen, die den Modus tragen.
Der Aufbau in Tailwind
In Tailwind hängen die Rollen an CSS-Variablen, und der dunkle Modus überschreibt genau diese Variablen. Die Klassen im Markup bleiben dabei unverändert, denn bg-surface heißt in beiden Modi dasselbe, nur der Wert dahinter wechselt.
Für das Umschalten gibt es zwei Wege. Die Systemeinstellung liest die Abfrage prefers-color-scheme, eine eigene Auswahl hängt an einer Klasse am html-Element. Wer beides anbietet, definiert die Werte zweimal: einmal in der Abfrage, einmal an der Klasse.
Ein Detail wird gern vergessen: color-scheme. Diese Angabe sagt dem Browser, wie er Scrollbalken, Auswahlfelder und Eingaben zeichnen soll. Ohne sie bleiben mitten in der dunklen Seite ein paar strahlend helle Bedienelemente stehen.
:root { color-scheme: light; --color-base: #ffffff; --color-surface: #f5f5f4; --color-text: #1c1917; --color-border: #e7e5e4;} @media (prefers-color-scheme: dark) { :root:not(.light) { color-scheme: dark; --color-base: #0c0a09; --color-surface: #1c1917; --color-text: #e7e5e4; --color-border: #292524; }}
Umschalten ohne Flackern
Wenn die gespeicherte Auswahl erst läuft, nachdem React geladen hat, zeichnet der Browser vorher eine helle Seite. Der Wechsel danach ist als kurzes Aufblitzen sichtbar, und genau daran erkennt man einen nachträglich eingebauten Dark Mode.
Die Lösung ist unspektakulär: ein kurzes Skript im head, das die gespeicherte Auswahl liest und die Klasse am html-Element setzt, bevor der erste Pixel steht. Es läuft ohne Framework, ohne Import und braucht keine zehn Zeilen.
Der Umschalter selbst kennt danach drei Zustände: hell, dunkel und der Einstellung des Systems folgen. Der dritte gehört dazu, denn viele Geräte wechseln abends von selbst, und diese Automatik sollte man nicht mit einer einmaligen Auswahl abschalten.
Wenige Rollen schlagen viele Werte.
Eine Liste aus Hex-Zahlen ist eine Bestandsaufnahme. Ein System wird daraus erst, wenn jeder Wert eine Aufgabe hat.
Was im Dunkeln kippt
Farben sind der einfache Teil. Auffällig wird ein dunkler Modus an den Stellen, die niemand als Farbe gedacht hat: Bilder mit weißem Hintergrund, Schatten, Logos als schwarze Datei und Diagramme mit hellem Raster.
Bilder brauchen entweder einen transparenten Hintergrund oder einen Rahmen, der sie in die Seite einbindet. Ein Foto darf hell bleiben, ein Logo nicht: Für Logos und Icons lohnt sich eine zweite Fassung, die dem Text folgt statt einer festen Farbe.
- Reines Schwarz als Grund. Jede Fläche darauf wirkt wie ein Loch, und Ränder verschwinden.
- Derselbe Schatten wie im Hellen. Man sieht ihn nicht, die Karte klebt am Hintergrund.
- Weiße Schrift in dünnem Schnitt. Sie blüht auf dunklem Grund aus und wird schwer lesbar.
- Sehr dunkles Grau als Grund, die Flächen darüber eine Stufe heller.
- Tiefe über Helligkeit: Was vorne liegt, ist heller, nicht dunkler umrandet.
- Gebrochenes Weiß für Text und ein Schnitt, der nicht zu dünn ist.
Vor dem Ausliefern prüfen
Der dunkle Modus fällt selten beim Bauen durch, sondern in den Zuständen, die man beim Bauen nicht sieht.
- Formulare in allen Zuständen. Leer, ausgefüllt, mit Fehler, deaktiviert und im Fokus. Besonders der Fokusring geht im Dunkeln gern unter, weil er dieselbe Helligkeit hat wie der Rand daneben.
- Alles, was über der Seite liegt. Menüs, Dialoge und Hinweise haben oft eine eigene Fläche im Code. Wenn eine davon vergessen wurde, leuchtet sie hell auf der dunklen Seite.
- Der erste Aufruf im privaten Fenster. Ohne gespeicherte Auswahl greift die Systemeinstellung. Nur so siehst du, was neue Besucher wirklich bekommen.
- Der Ausdruck. Ein dunkler Grund wird auf Papier zu einer schwarzen Seite. Eine kleine Regel für den Druck spart Toner und Ärger.
Ein guter dunkler Modus fällt nicht auf. Er wirkt nur so, als wäre die Seite immer so gemeint gewesen.
