Zum Hauptinhalt Zur Navigation

Mozilla und Apple: Browserhersteller bereiten sich auf den Dark Mode im Web vor

Wenn das Betriebssystem im Dark Mode ist, die Webseiten aber hell leuchten, ist das für das Auge mitunter ein unangenehmer Kontrast. Über eine CSS -Medienabfrage (Level 5) soll das für Webentwickler gelöst werden.
/ Andreas Sebayang
25 Kommentare News folgen (öffnet im neuen Fenster)
Im Dunkeln muss auf andere Farben geachtet werden. (Symbolbild) (Bild: Ezeqiel Becerra/AFP/Getty Images)
Im Dunkeln muss auf andere Farben geachtet werden. (Symbolbild) Bild: Ezeqiel Becerra/AFP/Getty Images

Der Dark Mode ist auch in Webseiten möglich, allerdings nur auf Aufforderung. Wie die Webkit-Entwickler schreiben(öffnet im neuen Fenster) , ist es beispielsweise Safari bereits möglich, über CSS Media Queries dem Browser mitzuteilen, wie die Anzeige aussehen soll, wenn das Betriebssystem in einem Dark Mode betrieben wird. Dafür gibt es das Merkmal prefers-color-scheme(öffnet im neuen Fenster) . Wer @media (prefers-color-scheme: dark) im CSS angibt, kann somit speziell für den Dark Mode etwa dunkle Farben für den HTML-Body definieren, die auf Rechnern ohne Dark Mode ignoriert werden.

Das Media-Merkmal prefers-color-scheme erlaubt auch die Eigenschaft light. Das ist für eine Druckansicht relevant(öffnet im neuen Fenster) . Zu beachten ist, dass es sich um eine Möglichkeit von CSS im Entwurfsstadium von Media Queries Level 5 handelt(öffnet im neuen Fenster) . Zudem ist Apple nicht der einzige Browserhersteller, der an der Umsetzung arbeitet. Auch Mozilla wird das Media-Merkmal unterstützen(öffnet im neuen Fenster) . Geplant ist die Umsetzung für Firefox 67. Allerdings wird prefers-color-scheme als experimentale Funktion von Firefox eingestuft. Das reicht aber, damit Webentwickler damit schon Tests durchführen können.

Wer sich dafür interessiert, dem empfiehlt Mozilla die Lektüre eines Artikels für Webseiten-Redesigns im Dark Mode(öffnet im neuen Fenster) . Der Dark Mode ist vor allem in dunklen Umgebungen praktisch. Allerdings erfordert dieser eine umfangreiche Anpassung. So muss das Betriebssystem dafür vorbereitet sein. Auch Anwendungen müssen in der Lage sein, ein dunkles Theme sinnvoll umzusetzen. Grafiken für Schaltelemente sollten beispielsweise auch bei dunklem Hintergrund noch gut erkennbar sein. Ein dunkelgrauer Pfeil in der Standardumgebung sollte im Dark Mode hellgrau sein. Bei Webseiten sind ähnliche Überlegungen anzustellen, weswegen der Browser nicht einfach entscheiden kann, die Darstellung abzudunkeln, wenn das Betriebssystem in einen dunklen Modus versetzt wurde.

Solche Entscheidungen können trotzdem getroffen werden. Es gibt beispielsweise Accessibility-Funktionen für sehschwache Anwender, die etwa den Kontrast verbessern oder die Farben invertieren. Das geht sowohl im Betriebssystem als auch im Browser.

Der Dark Mode hat noch einen weiteren Vorteil. Displays mit selbstleuchtenden Pixeln, wie etwa OLED- oder kommende QLED-Panel, sparen viel Energie, wenn Teile der Ansicht eher dunkel gehalten werden. Bei Displays mit klassischer Hintergrundbeleuchtung ist das aber kontraproduktiv, es sei denn, feines Local Dimming wird unterstützt. Diese Technik findet sich aber überwiegend in Fernsehern.


Relevante Themen