Bilder und Medien im Dark Mode

Das Dark Theme des Dashboards ging in gutem Zustand live: eine fast schwarze Seite, saubere Surface-Stufen, gebrochen weißer Text, durchgehend geprüfter Kontrast. Dann luden die Inhalte. Jedes Diagramm war ein Screenshot mit weißem Plot-Hintergrund, die Produktfotos waren auf Weiß aufgenommen, und das Hilfe-Panel bettete ein Video mit weißem Vorschaubild ein. Nachts las sich die Oberfläche wie eine Reihe erleuchteter Fenster an einer dunklen Wand – das Theme war dunkel; die Seite war es nicht.

Bilder sind der Teil der Seite, den ein Theme nicht umfärben kann: Fotografien, Screenshots und Embeds behalten in beiden Modi ihre eigenen Pixel. Unbehandelt wird ein Bild mit weißem Hintergrund mit großem Abstand zum hellsten Objekt in einer dunklen UI – vor einer fast schwarzen Seite liegt es bei etwa 20:1, heller als jeder Text im Theme. Die funktionierenden Antworten, grob nach Aufwand geordnet: Medien im Dark Mode leicht abdunkeln, Dark-Varianten der Grafiken ausliefern, die dir gehören, Icons und Diagramme in currentColor zeichnen und den Rest in einem Rahmen einfassen. Die Palette, in der diese Korrekturen sitzen – der Anker, die Surfaces, die Textwerte – ist das Thema unseres Dark-Mode-Guides; dieser Artikel handelt von den Pixeln, die diese Palette nicht erreicht.

Warum ruinieren helle Bilder ein Dark Theme?

Weil sich das Auge ständig an das Hellste anpasst, was es sieht. Das Sehen richtet sich nach der durchschnittlichen Luminanz des Sichtfeldes, und ein Dark Theme funktioniert, indem es diesen Durchschnitt niedrig hält – Text mit moderater Luminanz liest sich klar, weil sich das gesamte Feld darüber einig ist, wie dunkel die Welt ist. Ein helles Rechteck bricht diese Einigkeit: die Anpassung stellt sich auf das Bild ein, und alles darum herum wird trüb. Das Bild sitzt nicht einfach auf der Seite; es kalibriert die Seite um sich herum neu.

Die Zahlen zeigen, wie schief das Verhältnis ist. Vor einer Seite bei L ≈0,15 – ≈#070B14 – misst ein weißes Bildfeld ≈20:1, während der hellste Fließtext des Themes selbst bei ≈15:1 liegt. Der Screenshot übertrifft jede Überschrift auf dem Bildschirm im Kontrast, und die Aufmerksamkeit folgt dem Kontrast – ob der Inhalt es verdient oder nicht.

Sollten Bilder im Dark Mode abgedunkelt werden?

Leichtes Abdunkeln ist die günstigste wirksame Lösung, und es ist eine einzige Regel:

@media (prefers-color-scheme: dark) {
  .content img,
  .content video {
    filter: brightness(0.85);
  }
}

Ein Multiplikator von ≈0,85 bringt ein weißes Bildfeld vor derselben Seite von ≈20:1 auf ≈14:1 herunter – in den Bereich des hellen Textes des Themes selbst, statt darüber. Das Bild ist nicht länger das lauteste Objekt auf dem Bildschirm, und die meisten Fotografien überstehen die Änderung ohne sichtbaren Schaden.

Der Vorbehalt ist die Farbtreue. Der Filter multipliziert jeden Kanal, also dunkelt er das Produkt zusammen mit seinem Hintergrund ab – und eine Stofffarbe oder ein Farbmuster, das über Genauigkeit verkauft, sollte behutsam abgedunkelt werden (etwa 0,9) oder gar nicht. Abdunkeln ist ein grobes Werkzeug: es weiß nicht, was das Bild zeigt, nur wie hell es ist. Es verdient seinen Platz als Standardbehandlung für inhaltliche Bilder, mit Ausnahmen dort, wo die Farbe die Ware ist.

Wie liefert man pro Theme ein anderes Bild aus?

Für Grafiken, die dir gehören – Logos, Illustrationen, Diagramme – ist die robuste Antwort, zwei Assets auszuliefern und den Browser wählen zu lassen:

<picture>
  <source srcset="revenue-chart-dark.svg"
          media="(prefers-color-scheme: dark)">
  <img src="revenue-chart-light.svg" alt="Revenue by quarter">
</picture>

Die Media Query des <source>-Elements wählt die Dark-Variante immer dann, wenn das System danach fragt; das <img> bleibt überall sonst der Fallback. Das vollständige Verhalten des Elements ist in MDNs picture-Referenz dokumentiert.

Der Preis ist ehrlich: zwei Assets, die produziert und für immer synchron gehalten werden müssen. Er lohnt sich für die Grafiken, die Bedeutung tragen – und die Dark-Variante sollte für den dunklen Grund gestaltet werden, nicht aus der hellen erzeugt: transparente oder Theme-farbene Hintergründe, und Farben, die für Fast-Schwarz gewählt wurden, so wie der Rest der dunklen Palette.

Wann löst currentColor das Problem?

Für Icons und einfarbige Diagramme ist die token-freundliche Antwort, überhaupt keine Farbe mehr im Asset auszuliefern. Ein Inline-SVG, das mit fill="currentColor" oder stroke="currentColor" gezeichnet ist, erbt die CSS-Textfarbe seines Kontexts – das heißt, es erbt das semantische Text-Token, das heißt, es passt sich im Moment des Theme-Wechsels neu an, ohne zweites Asset und ohne Filter. Pfeile, Status-Glyphen, Line-Art für leere Zustände und einfache Architekturdiagramme können alle diesen Weg gehen.

Die Grenze steckt im Namen: eine Farbe. Die Technik deckt Grafiken ab, die Zeichnungen aus Linien sind, keine Abbildungen von Dingen – sobald ein Asset seine eigene Palette braucht, steigt es zur <picture>-Behandlung von oben auf.

Was ist das Rahmen-Muster?

Manche Helligkeit lässt sich weder abdunkeln noch ersetzen: von Nutzern hochgeladene Fotos, Vorschaubilder von Dritten, das Diagramm, das aus Gründen der Farbtreue weiß bleiben muss. Der verbleibende Zug ist, zu verändern, was die Helligkeit bedeutet. Eine nützliche Analogie ist die Galeriewand: eine weiße Fotografie an einer dunklen Wand wird nie nackt aufgehängt – sie bekommt ein Passepartout und einen Rahmen, und das Passepartout vermittelt zwischen dem hellen Abzug und dem dunklen Raum. Das Pendant in der Oberfläche ist, helle Medien auf eine erhöhte Surface mit sichtbarem Innenabstand zu setzen: das Bild liest sich als Inhalt, der in einem Rahmen präsentiert wird, statt als Loch, das ins Theme gebrannt wurde.

Der Rahmen wird vollständig aus der vorhandenen Maschinerie der Palette gebaut – eine erhöhte Surface eine Stufe über der Seite (etwa L ≈0,19 über einem Anker bei L ≈0,15), ein Innenabstand, breit genug, um bewusst zu wirken, und optional eine haardünne Border aus der Border-Rolle. Nichts in diesem Ablauf berührt die Pixel des Bildes; die Aufgabe der Palette ist es, sie gut zu empfangen. Öffne die Palette des Rahmens in Scale Composer – der dunkle Seiten-Anker mit den Werten für erhöhte Surface und Border, aus denen ein Medienrahmen schöpft, und der gemessene Helligkeits-Abstand zwischen den Stufen.

Der Surface-Stack einer dunklen Palette in Scale Composer: der Seiten-Anker, die erhöhte Surface, auf der ein Medienrahmen sitzt, und die Border-Rolle, mit gemessenen Helligkeits-Abständen

Was sollte man mit Bildern im Dark Mode niemals tun?

Zwei Behandlungen tauchen immer wieder auf, und beide lesen sich als Schaden. Fotografien automatisch zu invertieren – das filter: invert() des Themes auf Medien auszudehnen – macht sie zu Negativen: Himmel wird orange, Gesichter werden cyan, und keine noch so große Farbton-Rotation rettet sie ganz. Invertierung hat ihren Platz bei reiner Schwarz-auf-Weiß-Line-Art und nirgends sonst in der Bild-Pipeline. Starkes Abdunkeln ist das subtilere Versagen: dreh den Helligkeitsfilter Richtung 0,5, und Bilder sehen nicht mehr angepasst, sondern kaputt aus – Leser beurteilen Fotografien gegen ihre Erinnerung, nicht gegen die Seite, und ein so weit abgedunkeltes Foto liest sich als fehlerhaftes Panel statt als Gestaltungsentscheidung.

Was ist mit Screenshots in der Dokumentation?

Dokumentation ist der Sonderfall, weil Screenshots ihr Inhalt sind – Seite um Seite großer, überwiegend weißer Rechtecke, wenn das Produkt im Light Mode aufgenommen wurde. Es gibt zwei ehrliche Optionen. Die gründliche: nimm einen Satz Dark-Theme-Screenshots für die Dark-Theme-Dokumentation auf, damit die Bilder zur Seite um sie herum passen – zum realen Preis, die Aufnahme- und Pflege-Matrix zu verdoppeln. Die pragmatische: behalte einen einzigen Satz und wende das Rahmen-Muster konsequent an, damit jeder Screenshot mit Passepartout auf einer erhöhten Surface sitzt und die Helligkeit sich als gerahmter Inhalt liest. Das Abdunkeln über den Wrapper funktioniert als Notlösung für textlastige Aufnahmen, aber kleiner UI-Text in Screenshots verliert schnell an Lesbarkeit, also dunkle Dokumentations-Aufnahmen behutsamer ab als Fotografien.

Bereite die Bühne für die Pixel, die du nicht ändern kannst

Die Bilder kommen so hell an, wie sie sind; was ein Design-System steuert, ist die Bühne, auf der sie landen. Baue die Werte des Medienrahmens – die Rollen für erhöhte Surface, Border und Seite, die helle Inhalte einfassen, exportiert als design tokens mit dem Rest des Dark Themes, damit der Rahmen als System ausgeliefert wird und nicht als Improvisation.