Warum Bilder im Dark Mode versagen

Ein klassisches Beispiel: das Firmenlogo, schwarz auf weißem Hintergrund, wurde fürs klassische Light-Theme erstellt. Im Dark Mode bekommt es einen weißen Padding-Halo, weil viele Logos die Hintergrund-Farbe in der Datei fest verbacken haben. Oder ein UI-Icon mit dunklen Linien wird auf einem dunklen Theme nahezu unsichtbar.

Dark Mode hat sich 2026 als Default-Erwartung etabliert: 60–70 % der Nutzer aktivieren ihn auf Mobile, 35–45 % auf Desktop (PostHog-Telemetrie 2025). Wer Bilder nicht aktiv für Dark Mode plant, sieht sein Branding strukturell schlechter dargestellt.

Technik 1: prefers-color-scheme im picture-Tag

Die robusteste Lösung — und seit 2024 in allen Mainstream-Browsern unterstützt — ist das media-Attribut auf <source>-Elementen:

<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="logo-light.svg" alt="Marke">
</picture>

Stärken: deklarativ, robust, kein JavaScript, funktioniert mit Lazy-Loading. Wird beim Theme-Wechsel im Browser automatisch reaktiv ausgewertet. Schwächen: zwei separate Asset-Dateien pflegen. Bei vielen Logos schnell aufwendig.

Wann: für Logos und komplexe Brand-Marken, bei denen die Dark-Variante inhaltlich anders aussehen soll (Knockout-Version mit anderem Symbol, hellere Farben statt invertiert, etc.).

Technik 2: SVG mit currentColor

Für UI-Icons und einfache Logos ist die eleganteste Lösung ein SVG, das seine Farbe von CSS erbt:

<!-- SVG: kein fest verbackenes fill -->
<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

/* CSS: ein einziger Wert für beide Themes */
.icon { color: var(--text); }
:root[data-theme="light"] { --text: #111; }
:root[data-theme="dark"]  { --text: #eee; }

Stärken: eine einzige Datei, automatisches Anpassen an Theme-Variablen, kompatibel mit dem Icon Studio-Workflow. Schwächen: nur sinnvoll bei mono- und bichromen Icons. Funktioniert nicht mit eingebetteten Raster-Bildern.

Wann: UI-Icon-Sets, Mono-Logos, Strich-Logos, alles SVG-basiert mit klaren Linien. Mehr Hintergrund in unserem SVG/PNG/JPG-Icon-Beitrag.

Technik 3: CSS-Filter als Notfalls-Lösung

Für Legacy-Bilder ohne Dark-Variante hilft ein CSS-Filter:

@media (prefers-color-scheme: dark) {
  .legacy-logo { filter: invert(1) hue-rotate(180deg); }
}

Stärken: sofort verfügbar ohne Asset-Änderung. Schwächen:das Ergebnis sieht selten gut aus — Farbverläufe drehen sich falsch, Anti-Aliasing wird sichtbar. Wann: nur als temporärer Fallback, nicht als Default- Lösung.

Technik 4: Fotos mit anpassbarem Hintergrund

Bei Produktfotos ist das Problem ein anderes: ein Produktfoto auf weißem Hintergrund sieht im Dark Mode wie ein Lampen-Sticker aus. Drei Lösungen:

  • Transparenter Hintergrund (PNG/WebP-Alpha). Der elegante Pfad — das Produkt steht direkt auf dem Theme-Hintergrund. Erfordert Background-Removal-Pipeline.
  • Foto-Variante pro Theme. Foto mit hellem und Foto mit dunklem Hintergrund, ausgewählt via <picture> + media. Hoher Asset-Aufwand, beste Kontrolle.
  • Padding-Box mit Theme-Farbe. Das Foto bleibt auf weißem Hintergrund, aber CSS umgibt es mit einer 20-px-Box in der Theme-Farbe. Visuell der Kompromiss.

Logo-Spezifischer Workflow

Ein modernes Marken-Logo wird heute in zwei oder drei Varianten gepflegt:

  1. Wortmarke positiv: dunkel auf hell. Klassische Default-Variante.
  2. Wortmarke negativ: hell auf dunkel. Dark-Mode-Variante.
  3. Mono-Variante: nur Form, ein-farbig. Für Watermarks, Stempel, Embossing.

Wer ein Brand-Asset-System baut, sollte alle drei aus dem selben Master-File ableiten. SVG-Export aus Figma kann mit Layer-Visibility automatisiert pro Theme gerendert werden.

Performance-Implikationen

Dark-Mode-Bilder kosten Bytes. Drei Praktiken sparen sie:

  • SVG-Vars schlagen Bitmap-Pärchen. Eine SVG-Datei mit currentColor ersetzt zwei PNG-Varianten.
  • Format-Cascade pro Theme. Innerhalb des <picture>kannst du beide Cascades kombinieren: Light/AVIF, Light/WebP, Light/JPG, Dark/AVIF, Dark/WebP, Dark/JPG. Erweitert die Tag-Komplexität, hält aber Bytes minimal.
  • Preload nur das relevante Theme. Bei serverseitigem Theme-Detection (Cookie, User-Agent-Client-Hints) das passende Bild direkt preloaden — spart eine unnötige Request.

Mehr zu LCP-Tuning in unserem Core-Web-Vitals-Beitrag.

Theme-Reaktivität ohne Flash

Eine subtile Falle: wenn das Theme via JavaScript erst nach dem ersten Render eingestellt wird (klassisches FOUC-Problem), siehst du beim Page-Load kurz das Light-Theme-Bild, dann wechselt es zum Dark-Mode-Bild. Lösung: Theme-Detection im HTML-Server-Render (User-Agent-Client-Hints "Sec-CH-Prefers-Color-Scheme" ist seit 2024 in Chromium verfügbar) oder synchroner Inline-Script-Hack vor dem Body-Render.

Empfehlungs-Matrix

  • UI-Icons: SVG mit currentColor. Eine Datei, beide Themes.
  • Logos: picture-Tag mit zwei SVG-Varianten (hell/dunkel).
  • Hero-Bilder mit Foto: picture-Tag mit zwei Foto-Varianten.
  • Produktfotos: transparenter Hintergrund (PNG/WebP-Alpha), eine Datei reicht.
  • Legacy-Logos ohne Dark-Variante: kurzfristig CSS-Filter, langfristig Re-Design.

Quellen

MDN — prefers-color-scheme · MDN — picture, Art Direction · web.dev — prefers-color-scheme · MDN — Client Hints (Sec-CH-Prefers-Color-Scheme) · W3C SVG 2 — Specifying Paint · MDN — CSS filter · PostHog — Dark Mode Adoption.