Warum sieht meine Palette im Dark Mode schlecht aus?

Meist, weil sie invertiert statt abgeleitet wurde. Farben wirken vor dunkler Umgebung matter, die Kontrastlogik des Light Mode läuft rückwärts, und Elevations-Hinweise verschwinden — eine dunkle Palette braucht ihre eigene Helligkeitskurve und einen Sättigungs-Boost, berechnet aus denselben Ausgangsfarben.

Sollten dunkle Hintergründe reines Schwarz sein?

Selten. Fast-Schwarztöne im Bereich der tiefen Grautöne lassen Raum für Elevation (Flächen werden heller, je höher sie liegen) und mildern das Grellen von weißem Text. Reines Schwarz hat ein echtes Argument — OLED-Stromverbrauch und Kontrast — das ein bewusster Kompromiss ist, kein Standard.

Brauche ich separate Farben für den Dark Mode?

Separate Werte, keine separaten Entscheidungen. Eine abgeleitete dunkle Palette berechnet jede Farbrampe aus denselben Ausgangsfarben neu — neue Helligkeitskurve, verstärkte Sättigung — so bleibt die Marke erhalten, während sich jeder Wert anpasst. Eine zweite Palette von Hand auszuwählen verdoppelt stattdessen den Pflegeaufwand.

Wie funktioniert Elevation im Dark Mode?

Heller bedeutet näher. Schatten sind auf dunklen Flächen kaum sichtbar, also signalisieren erhöhte Elemente Höhe, indem sie heller sind als das, worauf sie liegen — das Gegenteil der Schattenlogik des Light Mode.

Welche Kontrastregeln gelten im Dark Mode?

Dieselben Untergrenzen — 4,5:1 für Fließtext, 3:1 für großen Text und UI-Teile — aber neue Fehlerquellen: reinweißer Text auf Dunkel leuchtet aus (Halation), gesättigte Markenfarben sacken ab, und Fast-Schwarz-Flächenstufen fallen ineinander zusammen.

Wie implementiere ich den Theme-Wechsel?

Über semantische Tokens — background, surface, text-primary — die einen Wert pro Theme halten. Komponenten verweisen auf das Token, prefers-color-scheme (plus ein manueller Umschalter) wählt das Theme, und keine Komponente weiß, in welchem Modus sie sich befindet.

Dark Mode Design: Der praktische Leitfaden

Dark Mode ist nicht Light Mode mit umgedrehten Werten — es ist ein zweites Rendering desselben Design-Systems, aus denselben Ausgangsfarben unter anderer Physik abgeleitet: Farben wirken vor dunkler Umgebung matter, Elevation muss mit Helligkeit statt Schatten signalisieren, und der Kontrast versagt an neuen Stellen. Dieser Hub sammelt unsere Leitfäden, wie man es richtig macht; die Ein-Bild-Version ist eine Palette und ihr abgeleiteter dunkler Zwilling, nebeneinander.

Invertierung ist die Falle

Eine helle Palette umzudrehen setzt Textwerte dorthin, wo Flächen sein sollten, stellt die Elevation auf den Kopf und entzieht der Markenfarbe ihre scheinbare Sättigung. Jeder Leitfaden in diesem Hub geht von der Alternative aus: der Ableitung. Die dunkle Palette wird aus derselben Ausgangsfarbe berechnet — mit eigener Helligkeitskurve und einem bewussten Sättigungs-Boost, der ausgleicht, wie dunkle Umgebungen Farbe dämpfen — so bleibt die Marke erhalten, während sich jeder Wert an die neue Physik anpasst. Dark Mode ist keine Invertierung führt dieses Argument vollständig aus und ist die natürliche erste Lektüre; Markenfarben für den Dark Mode anpassen wendet es auf den schwierigsten Fall an, die Markenfarbe selbst. Auch Scale Composer behandelt Dark Mode über Ableitung: dieselben Ausgangsfarben, die die helle Palette, die Schriftgrößenskala und das Raster erzeugen, erzeugen auch die dunkle Palette, sodass das dunkle Theme neu berechnete Ausgabe ist und nicht eine zweite, von Hand gepflegte Datei.

Die neue Physik, kurz

Drei Effekte bestimmen die meisten Dark-Mode-Entscheidungen. Die wahrgenommene Sättigung sinkt vor dunklen Hintergründen, weshalb abgeleitete dunkle Farbrampen das Chroma anheben. Schatten verlieren auf dunklen Flächen ihre Signalwirkung, also wird Höhe über Helligkeit vermittelt — erhöhte Flächen sind hellere Flächen. Und das Grellen kehrt sich um: weißer Text auf Fast-Schwarz kann ausblühen, Fast-Schwarz-Stufen drängen sich zusammen, und die Kontrastfehler wandern an Stellen, wo der Light Mode sie nie hatte.

Jeder Effekt hat seinen eigenen Leitfaden: Warum Farben auf Dunkel matter wirken misst den Sättigungsabfall und seine Kompensation, Elevation im Dark Mode arbeitet die Logik von „heller heißt näher” heraus, und Kontrast-Fallen im Dark Mode kartiert, wohin die Fehler wandern. Die Intuition hinter allen dreien ist dieselbe: Das visuelle System beurteilt Farbe und Tiefe relativ zu ihrer Umgebung, also verändert eine veränderte Umgebung jedes Urteil — kein Pixel muss sich bewegen, damit sich die Wahrnehmung ändert.

Der Hintergrund selbst ist eine Entscheidung, kein Selbstverständnis. Niemals reines Schwarz erklärt, warum die meisten dunklen Themes ein paar Stufen über #000 liegen — Raum, damit Elevation signalisieren kann, weniger Grellen gegen hellen Text — und OLED und echtes Schwarz gibt dem einen echten Gegenargument, Stromverbrauch und Kontrast auf OLED-Panels, ein faires Gehör.

Tokens machen es zu einem Modus, nicht zu einem Projekt

Die technische Hälfte ist eine Benennungsdisziplin: Komponenten verweisen auf semantische Rollen — background, surface, text-primary — und jede Rolle hält einen Wert pro Theme. Wechsle das Theme, und jedes gebundene Element folgt; keine Komponente hat eine Meinung darüber, in welchem Modus sie sich befindet. Dieselbe Mechanik wird von der Token-Seite in unserem Leitfaden zu design tokens und von der Paletten-Seite in Farbskalen behandelt. Innerhalb dieses Hubs baut Semantische Tokens für den Theme-Wechsel die Benennungsebene auf, und prefers-color-scheme: In CSS richtig gemacht verdrahtet sie mit der Systemeinstellung des Lesers — plus dem manuellen Umschalter, von dem Nutzer erwarten, dass er gewinnt.

Was die Ableitung nicht abdeckt

Zwei Aufgaben bleiben nach der Ableitung der Palette manuell. Fotos, Illustrationen und Logos kommen mit ihren eigenen Hintergründen und ihren eigenen Kontrastannahmen — Bilder und Medien im Dark Mode behandelt das Abdunkeln, transparente Kanten und die Fälle, in denen ein Asset einen zweiten Schnitt braucht. Und eine abgeleitete Palette ist ein starker erster Entwurf, kein Urteil: Eine dunkle Palette testen ist der Checklisten-Durchgang — echte Inhalte, echte Bildschirme, heruntergedrehte Helligkeit — der einfängt, was die Mathematik nicht sehen kann.

Leitfäden in diesem Hub

Bilder und Medien im Dark Mode
Bilder im Dark Mode behalten ihre eigenen Pixel: ein helles Foto wird auf einer fast schwarzen Seite zur Blendung. Abdunkeln, Dark-Varianten, currentColor und das Rahmen-Muster.
Dark Mode ist keine Invertierung
Dark-Mode-Design beginnt dort, wo Invertierung scheitert: umgekehrte Rollenlogik, kaputte Elevation, ausgelaugte Farben. Was es bedeutet, eine dunkle Palette aus denselben Ausgangsfarben abzuleiten.
Dark-Mode-Kontrast: Fallstricke
Dark-Mode-Kontrast behält dieselben WCAG-Untergrenzen, aber die Fehler verschieben sich: mittlere Grautöne brechen ein, Markenfarben versinken, und reines Weiß besteht die Rechnung, blüht aber aus.
Eine dunkle Palette testen
Dark Mode testen in sieben Prüfungen: Kontrast pro Theme neu verifizieren, Flächen-Unterscheidbarkeit, Zustände, Blendung, Farbsehen und Inhalte bei nächtlicher Helligkeit prüfen.
Elevation im Dark Mode: Heller heißt näher
Elevation im Dark Mode läuft über Helligkeit, nicht über Schatten: Flächen werden heller, je höher sie steigen. Die Flächenleiter mit echten Zahlen aufbauen und das JND-Gedränge-Limit kennen.
Markenfarben für den Dark Mode anpassen
Markenfarben für den Dark Mode anpassen: warum der kanonische Wert auf Fast-Schwarz versagt, welche Rampenstufe die Aufgabe übernimmt und wie du die On-Fill-Prüfung erneut durchführst.
Nie reines Schwarz: Dunkle Hintergründe wählen
Reines Schwarz ist für die meisten Interfaces die falsche Dark-Mode-Hintergrundfarbe: kein Platz für Elevation nach unten, Halations-Blendung. Der Fast-Schwarz-Bereich, der funktioniert.
OLED und echtes Schwarz: die Debatte
OLED macht ein Dark Mode in echtem Schwarz verlockend: schwarze Pixel schalten sich ab und sparen Strom. Was #000 kostet — Elevation, Smear, Blendung — und warum Nah-Schwarz Standard bleibt.
prefers-color-scheme: Richtig eingesetzt in CSS
Wie prefers-color-scheme funktioniert: die Media Query als Standard, ein data-theme-Override für den manuellen Umschalter, color-scheme und der Fix gegen das Aufblitzen des falschen Themes.
Semantische Tokens für den Theme-Wechsel
Dark mode design tokens erklärt: semantische Rollen, die einen Wert pro Theme halten, warum das Dark-Mapping kein Spiegelbild ist, und das CSS, das die Themes umschaltet.
Warum Farben im Dark Mode blasser wirken (und der 20-%-Fix)
Farben im Dark Mode ausgewaschen? Dasselbe Chroma wirkt auf Fast-Schwarz stumpfer — Simultankontrast erklärt warum, und ein Chroma-Boost von rund 20 % stellt die Leuchtkraft wieder her.

Sieh zu, wie eine Palette hinüberwechselt

Das schnellste Heilmittel gegen Invertierungs-Denken ist, einer Ableitung zuzusehen: wechsle eine ganze Palette zwischen hell und ihrem abgeleiteten dunkel — dieselben Ausgangsfarben, die dunkle Seite mit ihrer eigenen Helligkeitskurve und angewandtem Chroma-Boost. Was sich ändert und was sich bewusst nicht ändert, ist das ganze Thema dieses Hubs in einer einzigen Interaktion.