Dark Mode

Was ist der Dark Mode?

Der Dark Mode (dunkler Modus) ist eine Anzeigeoption, die helle Schrift und Bedienelemente auf dunklem Hintergrund zeigt. Er lässt sich im Betriebssystem, im Browser oder in einer App oder Website einstellen. Im Web kann eine Seite der Systemeinstellung der Besucher über die Media Feature prefers-color-scheme folgen und per Schalter eine eigene Wahl erlauben.

So funktioniert er im Web

• prefers-color-scheme: eine CSS-Media-Feature mit den Werten light und dark. MDN beschreibt sie als Erkennung, ob der Nutzer ein helles oder dunkles Thema gewählt hat, über eine Einstellung von Betriebssystem oder Browser. Sie ist seit Januar 2020 in Browsern breit verfügbar.
• color-scheme: eine CSS-Eigenschaft, meist als light dark auf :root gesetzt. Sie sagt dem Browser, welche Schemata die Seite unterstützt, damit er Hintergrund, Scrollbars und Standard-Formularelemente anpasst. Ihre übrigen Elemente gestaltet sie nicht, dafür brauchen Sie eigene Farben. Breit verfügbar seit Januar 2022.
• Das Meta-Tag: <meta name="color-scheme" content="light dark"> im Head, vor jedem CSS, lässt den Browser sofort den passenden Seitenhintergrund wählen, statt beim Laden des CSS kurz den falschen zu zeigen.
• light-dark(): eine CSS-Funktion, die je nach aktivem Schema eine von zwei Farben wählt, als kürzere Alternative zur Media Query.

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e8e8e8;
  }
}

body { background: var(--bg); color: var(--text); }

Definieren Sie Farben als Variablen mit Rollennamen (etwa --bg oder --accent) statt nach Farbton, damit nach dem Wechsel kein "Gelb" übrig bleibt, das nicht mehr gelb wirkt.

Vorteile und Grenzen

Viele finden ihn schlicht augenfreundlicher, und manche Nutzer, darunter Menschen mit Sehbehinderung, brauchen oder bevorzugen helle Schrift auf dunklem Grund. Auf AMOLED-Displays, wo dunkle Pixel weniger Strom brauchen, nennt web.dev Android-Fallstudien zu Google-Apps wie YouTube mit Einsparungen von bis zu 60 %. Diese Zahl gilt für diese Displays und Apps, nicht für jede Website und jeden Bildschirm. Die Aussage, der Dark Mode verbessere den Schlaf, ist eine Vermutung, kein gesichertes Ergebnis.

Beispiel

Ein SaaS-Dashboard mit Diagrammen. Im Dark Mode werden die weißen Kartenhintergründe fast schwarz, der Text wird gebrochen weiß, und die roten und grünen Diagrammfarben werden neu abgestimmt, damit sie auf dunklem Grund noch auffallen. Ein Logo mit schwarzer Wortmarke erhält eine helle Variante. Ohne diesen letzten Schritt verschwindet das Logo im Hintergrund.

Häufige Fehler

• Farben einfach invertieren. Fotos und Markenfarben wirken dann falsch. web.dev empfiehlt, Fotos per Filter wie grayscale(50%) abzuschwächen und für Inline-SVG-Icons currentColor zu nutzen.
• Reines Weiß auf reinem Schwarz. Das wirkt hart. Das eigene Beispiel von web.dev nutzt Text in rgb(250, 250, 250) auf rgb(5, 5, 5).
• Kontrast vergessen. WCAG 2.2 verlangt mindestens 4,5:1 für normalen und 3:1 für großen Text, in beiden Themen. Das Standard-Linkblau des Browsers fällt auf Schwarz durch, wie web.dev anmerkt. Siehe barrierefreie Farbpaletten und WCAG.
• Keine Möglichkeit zum Überschreiben. Folgen Sie standardmäßig dem System, lassen Sie aber die Wahl.
• Aufblitzen des falschen Themas. Wird die Wahl erst nach dem Laden von JavaScript gesetzt, blitzt bei jedem Besuch das falsche Thema auf. Nutzen Sie das Meta-Tag und wenden Sie eine gespeicherte Wahl früh an.
• Drittanbieter-Widgets und Screenshots vergessen. Einbettungen und Bilder für hellen Grund wirken auf Dunkel oft kaputt.

Dark Mode, UX und Monitoring

Der Dark Mode ist ein Thema für Design und User Experience, kann aber wie jede Funktion Rückschritte erleiden. Prüfen Sie Kontrast und Layout nach jedem Release in beiden Themen und beobachten Sie die Performance: Ein Theme-Skript, das das Rendern blockiert, oder zusätzliches CSS je Thema kann den ersten Paint verlangsamen. Das Page-Speed-Monitoring von LoadFocus führt geplante Lighthouse-Audits aus, darunter eine Kategorie Barrierefreiheit, sodass Sie Werte über die Zeit verfolgen. Mehr dazu in Performance-Tests und Barrierefreiheitsmetriken.

Häufige Fragen

Spart der Dark Mode Akku?

Nur auf Displays, auf denen dunkle Pixel weniger Strom brauchen, etwa AMOLED. web.dev nennt Einsparungen von bis zu 60 % in Android-Fallstudien zu Google-Apps. Bei LCD-Displays bleibt die Hintergrundbeleuchtung an, die Ersparnis ist klein oder fehlt.

Wie erkennt eine Website den Dark Mode?

Mit der Media Query prefers-color-scheme in CSS oder window.matchMedia("(prefers-color-scheme: dark)") in JavaScript. Sie spiegelt die Einstellung von Betriebssystem oder Browser wider.

Was bewirkt die Eigenschaft color-scheme?

Sie teilt dem Browser mit, welche Schemata Ihre Seite unterstützt, damit er Seitenhintergrund, Scrollbars und Standard-Formularelemente anpasst. Ihre eigenen Elemente gestalten Sie weiterhin selbst, zum Beispiel mit prefers-color-scheme oder light-dark().

Ist der Dark Mode besser für die Barrierefreiheit?

Das hängt vom Menschen ab. Manche, auch mit Sehbehinderung, bevorzugen helle Schrift auf dunklem Grund. Andere lesen helle Hintergründe besser. Bieten Sie beides an und halten Sie in jedem Thema den Kontrast hoch.

Sollte ich reines Schwarz verwenden?

Meist nicht. Sehr dunkles Grau mit leicht gebrochen weißem Text ist weniger hart. Auf AMOLED-Displays kann reines Schwarz mehr Strom sparen, es ist also ein Kompromiss.