jörn auerbach

utilize technology

Es werde kein Licht

2020-02-18 jo3rnweb

Der Mond ist aufgegangen. Er schwebt lautlos über dieser Seite in der rechten oberen Ecke (oder auf kleinen Screens in der rechten unteren). Mit einem Klick tauchst du ein in die tiefe Nacht. Ein Klick zurück und du bräunst dich wieder vor deinem Bildschirm.

Dark Mode ist omnipräsent. Einzug erhielt er zuerst bei Programmen, die viel Bildschirmzeit beanspruchen, wie Visual Studio Code oder Photoshop, ja sogar Microsoft Office. Es folgten stark frequentierte Webseiten wie Twitter, Reddit oder Twitch. Unternehmen wie Netflix haben sich einfach von Grund auf für dunkle Farben entschieden. Wikipedia zog noch nicht mit, aber hostet immerhin einen Artikel darüber. Apple und Google brachten mit den aktuellen Betriebsversionen iOS 13 und Android 10 den systemweiten Dark Mode in die Handys.

Wenn auch keine Einigkeit über ergonomische Auswirkungen herrscht, so hilft es bei OLED Displays den Stromverbrauch zu reduzieren. Und zumindest anekdotenhaft kann ich in meinem Bekanntenkreis etliche Verfechter (sprich: Glaubenskrieger) des dunklen Designs ausmachen. Menschen, die über solche Memes lachen: Caption: Und um es nicht unerwähnt zu lassen: Why do programmers prefer dark mode? Because light attracts bugs.

Stoße ich beim Surfen im Internet mal auf eine weiße Wand, mache ich mir das Dark Reader Addon zu Nutze. Doch automatisierte Konvertierungen liefern nicht immer optimale Ergebnisse. Deshalb entschied ich mich dazu, meine Seite für jeden Geschmack in dunkel (default) und hell anzubieten. Nun kannst du selbst entscheiden. Damit du beim nächsten Aufruf dieser Homepage nicht aus allen Wolken fällst, wird deine Präferenz im sogenannten local storage gespeichert. Das sieht so aus (Triggerwarning: der folgende Screenshot ist nicht im Dark Mode): Screenshot des Eintrags Leider funktioniert das immer nur für den selben Browser, das heißt unter Umständen fällst du doch aus allen Wolken. Aber du weißt ja jetzt, wo du das Theme ändern kannst.

Lediglich den Hintergrund einzuschwärzen war mir aber etwas zu banal. Im Zuge der Umgestaltung änderte ich deshalb auch gleich das Farbschema. Dieses basierte bislang auf dem Basisprojekt, auf das diese Homepage aufsetzt. Nun ist es “gebrandet”. Bei der Farbauswahl orientierte ich mich am Farbsystem von Material Design. Es gibt eine Primärfarbe (braun) sowie eine Sekundärfarbe (grün). Diese werden je nach Theme in verschiedenen Varianten eingesetzt. Bei der Verwendung eines Dark Themes sind es eher hellere Abstufungen, da der Hintergrund dunkel ist. Wenn wichtige Elemente ein zu hohes Deckvermögen gegenüber ihrem Hintergrund haben, schränkt das die Erkennbarkeit ein. Dies ist nur ein Kriterium der Barrierefreiheit im Internet. Webentwickler sollten sich immer vor Augen halten, dass nicht jeder eine Seite so betrachtet und benutzt, wie man selbst.

Cover photo by Nino Yang