Abo
  • IT-Karriere:

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.

Artikel veröffentlicht am ,
Im Dunkeln muss auf andere Farben geachtet werden. (Symbolbild)
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, 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. 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.

Stellenmarkt
  1. ITEOS, verschiedene Standorte
  2. MTU Friedrichshafen GmbH, Friedrichshafen

Das Media-Merkmal prefers-color-scheme erlaubt auch die Eigenschaft light. Das ist für eine Druckansicht relevant. Zu beachten ist, dass es sich um eine Möglichkeit von CSS im Entwurfsstadium von Media Queries Level 5 handelt. Zudem ist Apple nicht der einzige Browserhersteller, der an der Umsetzung arbeitet. Auch Mozilla wird das Media-Merkmal unterstützen. 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. 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.



Anzeige
Hardware-Angebote
  1. 259€ + Versand oder kostenlose Marktabholung (aktuell günstigste GTX 1070 Mini)
  2. 83,90€
  3. (u. a. Ryzen 5-2600X für 184,90€ oder Sapphire Radeon RX 570 Pulse für 149,00€)

Schnarchnase 10. Mai 2019 / Themenstart

Theoretisch ja, praktisch nein. Denn beheben lässt sich das auch jetzt schon, wird aber...

oli_p_aus_e 09. Mai 2019 / Themenstart

Ja, den Dark Reader find ich auch super. Ist bisher die beste Erweiterung dieser Art, die...

ML82 09. Mai 2019 / Themenstart

wenn einem sonst nichts mehr einfällt wird angeblich *besonderes* wasser vertrödelt...

DWolf 09. Mai 2019 / Themenstart

Bücher sind nicht schneeweiß und blendend, der Kindle ist auch moderat eingestellt...

Anonymouse 09. Mai 2019 / Themenstart

Okay, danke.

Kommentieren


Folgen Sie uns
       


Days Gone - Fazit

In Days Gone sind wir als Rocker Deacon St. John im zerstörten Oregon unterwegs und erleben das ganz große Abenteuer.

Days Gone - Fazit Video aufrufen
IT-Headhunter: ReactJS- und PHP-Experten verzweifelt gesucht
IT-Headhunter
ReactJS- und PHP-Experten verzweifelt gesucht

Marco Nadol vermittelt für Hays selbstständige Informatiker, Programmierer und Ingenieure in Unternehmen. Aus langjähriger Erfahrung als IT-Headhunter weiß er mittlerweile sehr gut, was ihre Chancen auf dem Markt erhöht und was sie verschlechtert.
Von Maja Hoock

  1. Jobporträt Wenn die Software für den Anwalt kurzen Prozess macht
  2. Struktrurwandel IT soll jetzt die Kohle nach Cottbus bringen
  3. IT-Jobporträt Spieleprogrammierer "Ich habe mehr Code gelöscht als geschrieben"

Katamaran Energy Observer: Kaffee zu kochen heißt, zwei Minuten später anzukommen
Katamaran Energy Observer
Kaffee zu kochen heißt, zwei Minuten später anzukommen

Schiffe müssen keine Dreckschleudern sein: Victorien Erussard und Jérôme Delafosse haben ein Boot konstruiert, das ohne fossilen Treibstoff auskommt. Es kann sogar auf hoher See selbst Treibstoff aus Meerwasser gewinnen. Auf ihrer Tour um die Welt wirbt die Energy Observer für erneuerbare Energien.
Ein Bericht von Werner Pluta

  1. Umweltschutz Kanäle in NRW bekommen Ladesäulen für Binnenschiffe
  2. Transport DLR plant Testfeld für autonome Schiffe in Brandenburg
  3. C-Enduro Britische Marine testet autonomes Wasserfahrzeug

Motorola One Vision im Hands on: Smartphone mit 48-Megapixel-Kamera für 300 Euro
Motorola One Vision im Hands on
Smartphone mit 48-Megapixel-Kamera für 300 Euro

Motorola bringt ein weiteres Android-One-Smartphone auf den Markt. Die Neuvorstellung verwendet viel Samsung-Technik und hat ein sehr schmales Display. Die technischen Daten sind für diese Preisklasse vielversprechend.
Ein Hands on von Ingo Pakalski

  1. Moto G7 Power Lenovos neues Motorola-Smartphone hat einen großen Akku
  2. Smartphones Lenovo leakt neue Moto-G7-Serie

    •  /