Der »Dunkelmodus« ist eine nützliche Funktion, um bei gedämpftem Licht während der Rechnernutzung die Augen zu schonen. Eine solche Betriebsart ist von den gängigen Herstellern schon auf Betriebssystem-Ebene eingebaut. Dieser Tipp beschäftigt sich mit der Frage, wie die Funktion auch in Webanwendungen genutzt werden kann.
Vorbemerkungen
Beim Verwenden eines Rechners ist die Abbildungsqualtität des Bildschirms, also Helligkeit, Schärfe, Kontrast, Detailtiefe ein wesentliches Kriterium. Die umgebenden Lichtverhältnisse spielen ebenfalls eine Rolle, abends ist es mit Beleuchtung im Raum weniger hell als bei Tageslicht.
Damit der Bildschirm in gedämpftem Licht nicht blendet, kann dessen Helligkeit heruntergeregelt werden, bis Bildschirmhelligkeit und Umgebungslicht zueinander passen. Das geht allerdings auf Kosten des Kontrasts und der Lesbarkeit und strengt die Augen stärker an.
Dunkelmodus
Abhilfe schafft der »Dunkelmodus«, den viele Programme unterstützen, um einerseits die Blendwirkung zu verringern und andererseits in schwachem Umgebungslicht eine gute Lesbarkeit beizubehalten. Jener Modus kehrt die hellen und dunklen Bereiche auf dem Bildschirm um, so dass die flächigen Regionen dunkel erscheinen und nur Details hell hervorgehoben sind.
Eine solche Funktion kann beispielsweise beim Mac direkt im Betriebssystem ein- und ausgeschaltet werden und wirkt dann auf alle Programme, die den Dunkelmodus unterstützen. Auch andere Betriebssysteme besitzen die Funktion und nicht nur Programme von Apple können mit dieser Einstellung umgehen.
Obsidian [1] zum Beispiel stellt sich ebenso um, wenn der Dunkelmodus eingestellt ist wie etwa Firefox [2]. Damit allerdings Webseiten im Browser den Dunkelmodus unterstützen, müssen deren Gestaltungsvorgaben erweitert werden.
Für Webseiten und -anwendungen liegt es also an deren Betreiber bzw. Hersteller, den im jeweiligen System eingestellen Modus, »hell« oder »dunkel«, zu unterstützen.
Dunkelmodus einschalten
Um eine Webseite zu veranlassen, den im Betriebssystem eingestellten Dunkelmodus wahrzunehmen und sie entsprechend darzustellen, wird die CSS-Eigenschaft prefers-color-scheme verwendet.
In den Gestaltungsvorgaben (Style Sheet) wird eine Media Query hinterlegt, die prefers-color-scheme verwendet, um zu prüfen, ob der Dunkelmodus angefordert ist. Für diesen Fall können in der Media Query alle Gestaltungsvorgaben hinterlegt werden, die ein dunkle Darstellung der betreffenden Webseite ergeben.
prefers-color-scheme@media (prefers-color-scheme: dark) {
.dark-theme.adaptive {
background: #292b2c;
color: #dadada;
}
}Elemente einer HTML-Seite werden anschließend über eine Klasse wie im folgenden Beispiel gekennzeichnet.
<div class="dark-theme adaptive">Die Gestaltungsvorgaben für den Dunkelmodus [3] beschreiben die Anwendung der Eigenschaft prefers-color-scheme samt einem durchgängigen Beispiel detaillierter. Anstelle der Verwendung einer CSS-Klasse wie zuvor beschrieben können in der Media Query für ein dunkles Theme auch HTML-Elemente angegeben werden.
prefers-color-scheme für HTML-Elemente@media (prefers-color-scheme: dark) {
body, h1, p {
background: #292b2c;
color: #dadada;
}
}Nicht nötig, aber bei Bedarf ebenfalls möglich ist die Verwendung zweier Style Sheets.
prefers-color-scheme zwei unterschiedliche Style Sheets verwenden<link rel="stylesheet" href="path/to/dark-theme.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="path/to/light-theme.css" media="(prefers-color-scheme: light)">Schlussbemerkungen
Die Erweiterung von Webseiten um eine Funktion zur Berücksichtigung des im System eingestellten Farbschemas erfordert nur wenige Handgriffe. Webseiten und Webanwendungen passen sich so nahtlos in die Benutzerschnittstelle des jeweiligen Systems ein und unterstützen eine augenfreundliche Verwendung.
Auch der nachträgliche Einbau ist ohne die Notwendigkeit verschiedener »Themes« möglich, es genügt das Hinzufügen einer Media Query im bestehenden Style Sheet.
Webseiten und Webanwendung benötigen auf diese Weise keine eigene Bedienoberfläche zur Steuerung der Darstellungsformen »hell« und »dunkel«. Es wird selbsttätig die Einstellung des Systems herangezogen, auf dem der Browser oder die Webanwendung läuft.