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. ATP Auto-Teile-Pollath Handels GmbH, Pressath bei Bayreuth
  2. PIA Automation Holding GmbH, Bad Neustadt an der Saale, Amberg

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
Top-Angebote
  1. ab 0,89€ (u. a. enthalten Distraint 2, Rusty Lake Paradise, Nex Machina, Shantae: Half-Genie Hero)
  2. (u. a. The Division 2 für 36,99€, Just Cause 4 für 17,99€, Kerbal Space Program für 7,99€)
  3. (u. a. Sandisk Plus 1-TB-SSD für 88,00€, WD Elements 4-TB-Festplatte extern für 79,00€)
  4. ab 419,00€

Schnarchnase 10. Mai 2019

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

oli_p_aus_e 09. Mai 2019

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

ML82 09. Mai 2019

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

DWolf 09. Mai 2019

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

Anonymouse 09. Mai 2019

Okay, danke.


Folgen Sie uns
       


Radeon RX 5700 (XT) - Test

Die Navi-10-Grafikkarten schlagen die Geforce RTX 2060(S), benötigen aber etwas mehr Energie und unterstützen kein Hardware-Raytracing, dafür sind sie günstiger.

Radeon RX 5700 (XT) - Test Video aufrufen
FPM-Sicherheitslücke: Daten exfiltrieren mit Facebooks HHVM
FPM-Sicherheitslücke
Daten exfiltrieren mit Facebooks HHVM

Server für den sogenannten FastCGI Process Manager (FPM) können, wenn sie übers Internet erreichbar sind, unbefugten Zugriff auf Dateien eines Systems geben. Das betrifft vor allem HHVM von Facebook, bei PHP sind die Risiken geringer.
Eine Exklusivmeldung von Hanno Böck

  1. HHVM Facebooks PHP-Alternative erscheint ohne PHP

Transport Fever 2 angespielt: Wachstum ist doch nicht alles
Transport Fever 2 angespielt
Wachstum ist doch nicht alles

Wesentlich mehr Umfang, bessere Übersicht dank neuer Benutzerführung und eine Kampagne mit 18 Missionen: Das Schweizer Entwicklerstudio Urban Games hat Golem.de das Aufbauspiel Transport Fever 2 vorgestellt - bei einer Bahnfahrt.
Von Achim Fehrenbach

  1. Mordhau angespielt Die mit dem Schwertknauf zuschlagen
  2. Bus Simulator angespielt Zwischen Bodenschwelle und Haltestelle
  3. Bright Memory angespielt Brachialer PC-Shooter aus China

Ryzen 3900X/3700X im Test: AMDs 7-nm-CPUs lassen Intel hinter sich
Ryzen 3900X/3700X im Test
AMDs 7-nm-CPUs lassen Intel hinter sich

Das beste Prozessor-Design seit dem Athlon 64: Mit den Ryzen 3000 alias Matisse bringt AMD sehr leistungsstarke und Energie-effiziente CPUs zu niedrigen Preisen in den Handel. Obendrein laufen die auch auf zwei Jahre alten sowie günstigen Platinen mit schnellem DDR4-Speicher.
Ein Test von Marc Sauter

  1. Ryzen 3000 BIOS-Updates schalten PCIe Gen4 für ältere Boards frei
  2. Mehr Performance Windows 10 v1903 hat besseren Ryzen-Scheduler
  3. Picasso für Sockel AM4 AMD verlötet Ryzen 3400G für flottere iGPU

    •  /