Dark-Mode-Farbpaletten, die Bestand haben

Fast nie. Es lohnt sich, die Gründe anhand von Zahlen statt als Faustregel zu sehen. Hier sind die dunklen Hintergründe und Card-Oberflächen aus fünf unabhängigen, implementierten 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 Ausweichmöglichkeit 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 besitzen einen Farbton (30, 222, 128, 36), der meist in Richtung der Akzentfarbe tendiert. Ein getöntes dunkles Neutral wird als bewusst gestaltet wahrgenommen; ein ungetöntes wirkt wie ein Standardwert, weil es 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. Der Akzent verliert an Kontrast. Eine gesättigte Markenfarbe in einem mittleren Ton, die auf Weiß sauber wirkt, ist gegen einen Beinahe-Schwarz-Hintergrund oft zu dunkel. Die Invertierung der Neutraltöne betrifft sie nicht, sodass sie eher unauffällig als offensichtlich scheitert.
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. Deaktivierte und gedämpfte Zustände kollabieren. Im Light-Mode sind dies hellere Grautöne. Invertiert werden sie zu dunklen Grautönen auf dunklem Hintergrund, und „gedämpft“ 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 Stack 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-Schwarz-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 „vibriert“ – ein Effekt, der manche dunklen 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 anhand eines Kontrastziels. 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, was genau der Punkt ist: 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 der Zweck 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 Elevations-Modell und die Entscheidung, die am stärksten bestimmt, ob ein dunkles UI als gestaltet oder als bloß invertiert wahrgenommen wird.

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 – jene Dateien, die ein Coding-Agent vor der UI-Erstellung liest – 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 dieser Schritt zerstört die vier zuvor genannten Punkte. 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 Ebenen 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 doppelte Funktionen.

2. 2

   Gedeckten Text auf jeder Ebene rendern

   Nicht nur auf dem Hintergrund. „Gedeckt auf Card“ ist der Punkt, an dem eine invertierte Palette meist scheitert, und gleichzeitig 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 Vordergrundfarbe, der Hover-Zustand und der Rahmen gemeinsam geprüft: genau die Gruppe von Rollen, die oft zuletzt definiert, aber zuerst verwendet wird.

4. 4

   Fokus setzen

   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 wird die Ebene unterhalb Ihres Hintergrunds entfernt, noch bevor Sie bemerken, dass Sie eine benötigen.
• Die Akzentfarbe des Light Modes unverändert übernehmen. Diese muss im Dark Mode meist aufgehellt und oft entsättigt werden; zudem wird häufig ein dunkler Text darauf benötigt.
• 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 das meist inkonsistent.
• Auf einer Marketingseite testen. Hero-Sektionen lassen jede Palette gut aussehen. Testen Sie auf dem dichtesten Screen, den Sie haben.