Dark mode für die eigene Website

Hello darkness, my old friend

Im Grunde war der Dark mode der Standard in den ersten Betriebssystemen für den PC: Mit MS DOS wurde die Kommandozeile mit weißen Text auf schwarzem Hintergrund dargestellt. Das änderte sich mit den ersten grafischen Oberflächen, aber kehrte als Trend in den letzten Jahren zurück. Inzwischen hielt er Einzug in die meisten Betriebssysteme: Mit Windows 10 und macOS Mojave 10.14 für den PC sowie Android 9 und iOS 13 für mobile Geräte ist die Unterstützung für den Dark mode breit aufgestellt. Die Betriebssysteme erlauben damit die Einstellung eines dunklen Farbschemas für das User Interface, also die Benutzeroberfläche. Die Einstellung ist systemweit und kann von zusätzlich installierten Apps und auch von Websites unterstützt werden.

Angenehmer zu lesen?

Einige Menschen schreiben von einer gefühlten Stressminderung im Dark mode durch den geringeren Blaulichtanteil. In dunkleren Umgebungen ist es für die Augen schonender, nicht direkt in eine Lichtquelle in Form eines leuchtend-hellen Displays schauen zu müssen — hier punktet der Dark mode eindeutig. Unter hellen Lichtbedingungen verkehrt sich dieser Effekt wieder, weshalb es ratsam ist, den Seitenbesucher*innen einen Dark mode nur zusätzlich anzubieten.

Strom sparen mit dem Dark mode

Es bleibt aber keineswegs bei Geschmacksfragen. Mit neueren Geräten bringt der Dark mode einen echten praktischen Nutzen: er schont den Akku. Bis vor Kurzem war nur der Einsatz von Liquid Crystal Displays in Smartphones üblich. Dabei werden die LCD-Panels von hinten gleichmäßig beleuchtet, darüber finden sich zwischen zwei gekreuzten Polarisationsfilter Flüssigkristalle. Mit elektrischer Spannung können sie je nach Ausrichtung die Polarisationsebene des Lichts verändern. Die Farben entstehen folglich sehr einfach gesagt durch das Abblocken von Licht. In der Praxis erkennt man diese Displays aber unter anderem daran, dass das Schwarz nie wirklich tiefschwarz ist, sondern immer ein wenig mitleuchtet. In modernen Smartphones hält dagegen die OLED-Technik Einzug. Anders als bei den zuvor üblichen LCD-Panels wird hierbei jeder Bildpunkt einzeln beleuchtet. Schwarze Pixel sind dann wie ausgeschaltet und verbrauchen keine Energie. Geräte mit OLED-Technik können im Dark mode folglich Energie sparen, da der Hintergrund nicht mehr beleuchtet werden muss.

Dark mode mit CSS3 umsetzen

Damit das Farbschema auf Websites berücksichtigt werden kann, implementierten inzwischen alle gängigen Browser das CSS-Feature »prefers-color-scheme«. Im Stylesheet kann damit eine Weiche festgelegt werden. Wenn Anwender*innen das dunkle Farbschema in ihrem Betriebssystem aktiviert haben, rendert der Browser die Website im entsprechenden Modus.

Ein sehr schlichtes Beispiel veranschaulicht, wie Webdesigner und Entwickler den Dark mode unterstützen können:

body {
color: black;
background: white;
}
@media (prefers-color-scheme: dark) {
/ Dark mode aktiv /
body {
color: white;
background: black;
}
}

Standardmäßig wird hier also schwarzer Text auf weißem Hintergrund festgelegt. Mit dem Media Query »prefers-color-scheme: dark« werden diese Eigenschaften entsprechend vertauscht.

Wenn es komplizierter wird …

Stylesheets sind deutlich umfassender als das oben genannte Beispiel. Eine zeitsparende Möglichkeit kann sein, Farben im Stylesheet als »Custom Properties« zu definieren. Damit könnten zu Beginn des Stylesheets Farben als Variablen definiert werden und in einem Media Query für den Dark mode überschrieben werden. Damit muss nicht mehr jedes Element einzeln angepasst werden.

Als Agentur unterstütze ich Sie gerne bei der Umsetzung eines Dark mode für Ihre Website.