Fast nie, und es lohnt sich, dies anhand von Zahlen statt als Faustregel zu betrachten. Hier sind die dunklen Hintergründe und Kartenebenen aus fünf verschiedenen produktiven Paletten in HSL:

Drei Muster, alle konsistent, keines davon zufällig.

• Nichts hat eine Helligkeit von 0 %. Der dunkelste Wert liegt bei 8 %. Reines Schwarz ist der einzige Wert, unter dem es keinen Spielraum mehr gibt – sobald eine Oberfläche *unter* dem Hintergrund benötigt wird, gibt es keine Option mehr.
• Cards sind 3 bis 5 Punkte heller als der Hintergrund. In dunklen Interfaces bedeutet „erhöht“ auch „heller“. Dies kehrt den Instinkt aus dem Light-Mode um, bei dem eine Card oft das hellere Element auf einer getönten Seite ist.
• Nur einer der fünf Werte ist ein echtes Grau. Die anderen haben einen Farbton – 30, 222, 128, 36 –, der meist in Richtung der Akzentfarbe tendiert. Ein getönter dunkler Neutralton wirkt bewusst gestaltet; ein ungetönter wirkt wie ein Standardwert, weil er eben der Standard ist.

Der schnellste Weg zu einem schlechten Dark Mode ist es, die Helligkeit jedes Light-Mode-Werts einfach umzukehren. Dabei gehen in etwa dieser Reihenfolge vier spezifische Dinge kaputt:

1. Schatten funktionieren nicht mehr. Ein Schatten ist Dunkelheit, die auf eine hellere Oberfläche geworfen wird. Auf einer dunklen Oberfläche gibt es nichts mehr, was man weiter abdunkeln könnte; somit verschwinden alle Elevations-Hinweise lautlos und das Interface wird flach.
2. Die Akzentfarbe verliert den Kontrast. Eine gesättigte Markenfarbe im mittleren Tonbereich, die auf Weiß sauber wirkt, ist gegen einen beinahe schwarzen Hintergrund oft zu dunkel. Da die Invertierung der Neutraltöne sie nicht betrifft, scheitert sie eher unauffällig als offensichtlich.
3. Rahmen verschwinden oder stechen zu sehr hervor. Ein Rahmen im Light-Mode ist eine leicht dunklere Linie. Invertiert wird daraus eine leicht hellere Linie – die entweder gegen die Card verschwindet oder gegen den Hintergrund leuchtet, je nachdem, auf welcher Oberfläche sie liegt.
4. Disabled- und Muted-Zustände kollabieren. Im Light-Mode sind dies hellere Grautöne. Invertiert werden sie zu dunklen Grautönen auf dunklem Hintergrund, und „muted“ wird zu „unsichtbar“.

Da Schatten nicht zur Verfügung stehen, drücken dunkle Interfaces Tiefe über die Helligkeit der Oberflächen aus. Genau das bewirkt der Abstand zwischen Hintergrund und Card in der obigen Tabelle: jede Ebene im Stapel ist ein Schritt nach oben in der Helligkeit.

Es werden mindestens drei Ebenen benötigt, und es lohnt sich, diese zu benennen, statt zu improvisieren: der Seitenhintergrund, eine erhöhte Oberfläche (Cards, Panels) und eine Overlay-Oberfläche (Popovers, Dropdowns, Dialoge), die über beiden liegt. Ein Abstand von 3 bis 5 Helligkeitspunkten hält die Grenzen lesbar, ohne den Bildschirm in Streifen zu verwandeln. Unter etwa 3 Punkten sind die Ebenen bei normaler Helligkeit nicht mehr unterscheidbar; deutlich über 6 Punkten wirkt die oberste Fläche wie ein Light-Mode-Panel, das jemand dort platziert hat.

Betrachten Sie erneut die Primärfarben dieser fünf Kits: 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Alle sind helle oder mittlere Töne. Keiner ist eine tief gesättigte Version des Farbtons, denn eine tief gesättigte Farbe auf einer beinahe schwarzen Oberfläche ist sowohl schwer lesbar als auch anstrengend für die Augen.

Die allgemeine Regel lautet, dass ein Light-Mode-Akzent für den Dark Mode aufgehellt und meist entsättigt werden muss. Aufhellung schafft Kontrast; Entsättigung verhindert, dass die Farbe gegen das dunkle Neutral grau „vibriert“ – ein Effekt, der einige dunkle Themes physisch ermüdend macht. Zudem benötigt der Akzent eine eigene Entscheidung für den Vordergrund: Eine Farbe, die hell genug ist, um auf Dunkel lesbar zu sein, ist oft so hell, dass sie *dunklen* Text benötigt, was das Gegenteil der Light-Mode-Kombination ist.

Prüfen Sie beide Richtungen gegen ein Kontrastziel. Fließtext auf dem Hintergrund ist offensichtlich; die zwei Punkte, die oft vergessen werden, sind gedämpfter Text auf einer Card und der Vordergrund des Akzents auf dem Akzent selbst.

Hier lassen einen die meisten Paletten-Galerien im Stich. Eine Reihe von fünf Hex-Werten vermittelt zwar die Stimmung, beantwortet aber fast keine der Fragen, die ein echter Bildschirm stellt: Welche Farbe hat ein Rahmen auf einer Card? Wie sieht gedämpfter Text auf einem Overlay aus? Wie sieht ein destruktiver Button aus, wenn er deaktiviert ist? Welche Farbe hat der Ring bei einem fokussierten Input?

Die Rollenliste ist in beiden Modi identisch, und genau das ist der Punkt: background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, plus Chart-Serien. Definieren Sie diese einmal pro Modus, und jede Komponente lässt sich ohne manuelle Farbwahl auflösen. Wer dies überspringt, führt dazu, dass jeder neue Bildschirm die Farben neu und inkonsistent wählt. Die vollständige Liste und die Zweckbestimmung jeder Rolle finden Sie in semantic colour tokens explained.

Alles bisherige waren Regeln. Dies sind vier dunkle Sets, die diesen folgen, ausgewählt, weil sie dasselbe Problem auf sichtbar unterschiedliche Weise lösen. Betrachten Sie das Paar aus background und card in jedem Set: Dieser Abstand ist das Elevationsmodell und die Entscheidung, die am stärksten bestimmt, ob ein dunkles UI gestaltet oder lediglich invertiert wirkt.

Interfaces werden zunehmend von Coding-Agents auf Basis schriftlicher Briefings erstellt, wobei der Dark Mode das am häufigsten fehlende Element in diesen Briefings ist. Wir haben 299 öffentliche DESIGN.md-Dateien analysiert – die Dateien, die ein Coding-Agent liest, bevor er die UI schreibt – und untersucht, welche Inhalte sie abdecken.

Die Folge ist vorhersehbar: Wird eine dunkle Variante ohne schriftliche Vorgaben angefordert, invertiert ein Agent die Grautöne – genau der Schritt, der die vier zuvor genannten Punkte zunichtemacht. Das Ergebnis wirkt auf dem ersten Screen plausibel, ist aber beim fünften inkonsistent. Da jeder einzelne Screen für sich gut aussieht, bemerkt niemand den Fehler, bis die gesamte App fertiggestellt ist.

1. 1

   Drei Oberflächen stapeln

   Platzieren Sie ein Overlay auf einer Card auf dem Hintergrund, jeweils mit einem einpixeligen Rahmen. Wenn eine Grenze verschwindet, liegen Ihre Helligkeitsstufen zu nah beieinander oder Ihre Rahmen-Rolle übernimmt eine Doppelfunktion.

2. 2

   Gedeckten Text auf jeder Oberfläche rendern

   Nicht nur auf dem Hintergrund. „Gedeckt-auf-Card“ ist der Punkt, an dem eine invertierte Palette meist scheitert, und es ist der häufigste Textzustand in einer dichten Benutzeroberfläche.

3. 3

   Eine destruktive Bestätigung erstellen

   Hier werden die Rollen für destruktive Elemente, deren Vordergrund, Hover-Zustand und Rahmen gemeinsam geprüft – genau die Gruppe von Rollen, die oft zuletzt definiert, aber zuerst verwendet wird.

4. 4

   Ein Element fokussieren

   Tabben Sie zu einem Input. Ein Fokusring ist eine Farbe, die selten bewusst gewählt wird. Entweder übernimmt Ihre Akzentfarbe eine Aufgabe, für die sie ungeeignet ist, oder es wird ein Browser-Standard verwendet, den niemand ausgewählt hat.

5. 5

   Eine dichte Tabelle betrachten

   Drei nebeneinanderliegende Grautöne sind die größte Herausforderung für eine dunkle Palette. Eine Palette, die eine Einstellungs-Tabelle übersteht, meistert eine Marketingseite mühelos; das Gegenteil gilt nicht.

• Mit reinem Schwarz beginnen. Dadurch entfällt die Ebene unter Ihrem Hintergrund, noch bevor Sie merken, dass Sie eine benötigen.
• Die Akzentfarbe des Light Modes unverändert übernehmen. Diese muss im Dark Mode meist aufgehellt, oft entsättigt werden und benötigt unter Umständen dunklen Text darauf.
• Schatten beibehalten und gleichzeitig Helligkeitsstufen hinzufügen. Entscheiden Sie sich für eine Sprache zur Darstellung von Tiefe (Elevation). Beides gleichzeitig lässt erhabene Oberflächen verschwommen wirken.
• Nur das definieren, was der erste Screen benötigt. Die Rollen, die Sie auslassen, werden vom nächsten Screen eigenständig erfunden – und zwar auf eine andere Weise.
• Auf einer Marketingseite testen. Hero-Sektionen lassen jede Palette gut aussehen. Testen Sie auf dem dichtesten Screen, den Sie haben.