Dunkelmodus in Webanwendungen

26. März 2026

Die letzten Tage habe ich mich immer mal wieder mit dem Einbau eines »Dunkelmodus« in meinen Webauftritt beschäftigt. Eine nützliche Sache, um bei schwachem Licht die Augen zu schonen. Wird es richtig umgesetzt, müssen dafür nicht in jeder Webseite Bedienelemente vorgesehen werden sondern Webseiten nutzen einfach die Einstellung im Betriebssystem des Rechners.

Die Aktion ist noch nicht vollständig abgeschlossen, aber das Journal, die Fotoseiten sowie die Startseite sind schon fertig damit ausgestattet. 

Die meiste Arbeit machte gar nicht mal die Umstellung der genannten Seiten sondern die Anpassung des Style Sheets für AsciiDoc, das ich für viele Web-Dokumente nutze. Hier war die Arbeit mit der »Inspektor«-Funktion des Browsers nützlich, um im umfangreichen Style Sheet von AsciiDoc jene zahlreichen Elemente zu finden, die es mit einer variablen Hell-/Dunkeleinstellung anzusprechen galt. 

Als besonders verzwickt erwies sich hierbei die Einbindung des Code Highlighters, ich verwende highlightjs. Dieser verwendet seine eigenen Style Sheets je nach dargestellter Programmiersprache und Theme. Um nicht für alle erdenklichen Varianten die Style Sheets anpassen zu müssen, entschied ich mich dafür, das »darkula« Theme für alle Dokumente fest einzustellen, egal ob hell oder dunkel. Das sieht gar nicht mal so schlecht aus und hat eine Menge Aufwand gespart. 

Nun müssen noch »Die Ferne« und der Jahreskalender angepasst werden, irgendwann mal, wenn wieder Zeit ist. Die wenigen Schritte, die zum Einbau eines Dunkelmodus nötig sind, habe ich in einem Tipp aufgeschrieben: Dunkelmodus in Webanwendungen.

Bild:
Bei Dunkelheit sieht die Welt ganz anders aus
Frankfurt, März 2024
Lomography CN 800, Summilux-M 35
© Ulrich Hilger