Mar 16, 2022
How to rock the Darkmode (DE) 🌚
Ein Exkurs zur Einführung des Darkmodes auf deiner Webseite
Einleitung
U m die Augen zu schonen, im schattigen Plätzchen beim Programmieren,
oder Strom zu sparen (bei passenden Bildschirmen),
als auch einfach nur aus der Vorliebe heraus — der Darkmode.
Gründe, warum Anwender und Webseiten-Besucher eine dunklere Farbwahl im System und oder Browser (…) bevorzugen, gibt es einige und vor allem Unterschiedliche.
Eine Umfrage von Thomas Steiner aus dem Jahr 2019 wurde hierzu auf medium.com veröffentlicht. Interessant ist dabei: Bereits damals gaben die über 200 Befragten, mit über 80 Prozent, den “Dark Mode” als bevorzugte Darstellung an.
Die Firma Apple schreibt über den Dunkelmodus:
Mit dem Dunkelmodus kannst du dich besser auf deine Arbeit konzentrieren, da deine Inhalte hervorgehoben werden, während Steuerelemente und Fenster in den Hintergrund treten.
Seit Safari (Technology Preview) 68,
Firefox Version 67,
Chrome in Version 76,
also ab dem 30 Juli 2019 möglich den Dark Mode auch im Web richtig zu nutzen.
Mittlerweile ist es aber auch direkt in den marktführenden und aktualisierten Betriebssystemen möglich, systemweit auf den Dunkelmodus umzustellen.
Beispiel bei MacOs:
Die Schritte hierzu sind unterschiedlich, daher am besten über Deine favorisierte Suchmaschine die Schritte google’n:
Möglicher Suchterm:
{Dein Betriebsystem/Gerät} +”Darkmode einschalten”
Farbwechsel oder Einstellung
Switches
Für die Nutzer, die den Dark-Mode nicht ständig aktiv haben, sondern je nach Lichtbedingungen den äußeren Lichtverhältnissen anpassen wollen, eignet sich eine Möglichkeit diese einfach umzustellen.
Je nach eingesetzter Technologie oder Framework gibt es hierfür bereits fertige Lösungen und Extensions.
Weitere beispielhafte Umsetzung finden wir in TailwindCSS,
Material Design, React, Wordpress und weiteren.
Ich persönlich kann mich den 25,4% der Befragten anschließen, dass ich den DarkMode am Handy sowie Laptop ständig an habe.
Aber das ist nur meine persönliche Handhabe.
Automatisch
Beispiel App
Bei Apps wie Flux, kann man ab einer gewissen Uhrzeit, bspw 2 Stunden vor dem Schlafen, auf reduzierte Farben, dunkle Farben oder eben blau-reduzierte Farben umstellen.
Das Ganze ganz automatisch ohne gelbe Blaulicht-Filter-Brille.
Beispiel Navi
Wenn ich im Tunnel bin — und das meine ich jetzt nicht arbeitsbezogen, schaltet sich mein Navigationsgerät des Autos, automatisch in den Dunkelmodus. Sobald ich jenen verlasse, stellt es sich wieder zurück.
Auch wenn ich kein großer Autoexperte bin, wird sich mit einer hohen Wahrscheinlichkeit an den Lichtsensoren statt GPS/Standorten bedient.
Als Entwickler sind solche Sensoren natürlich spannend. Es könnte daher sein, dass in Zukunft mit der Ambient Light Sensor API auch solche an die Lichtumgebung verknüpften Wechsel möglich wären.
Ab gewissen Beleuchtungsstärken kann im “auto” Modus dann auch dies Einzug auf den Webseiten erfahren. Aktuell ist die Abfrage jener Sensoren nur im Entwicklermodus möglich.
Wem es jetzt schon in den Fingern juckt: Arnelle Balane hat dies bereits umgesetzt.
Statisch
Der Vollständigkeitshalber gibt es natürlich die Möglichkeit ganz auf dunkle Farben zu setzen. So wie ich bei meiner persönlichen Entwicklerwebsite.
Für diese habe bei der Erstellung (des GoHugo-Themes) direkt ein dunkles Design gewählt — als Gestaltungsgrundlage.
Farbanpassung
Ein guter erster Schritt um deine Webseite fit für den Darkmode zu machen, wären die Farben (Vorder- und Hintergrund). Je nach Art der Webseite (CMS/Static) und damit verbundenen Einschränkungen und Rechten sind die Einbindungslösungen weitreichend.
Verschiedenste Modelle werden hier gut aufgezeigt (EN).
Als Beispiel gehen wir auf die vermutlich einfachste Variante ein.
Besteht deine (generierte) CSS-Datei beispielsweise aus folgenden Definitionen:
body { color: #222; background: #fff; font: 100% system-ui}a { color: #0033cc}
Können wir diese mit einer einfachen Media Query erweitern:
@media (prefers-color-scheme: dark) {}
P.s. Wenn Sie Tailwind CSS nutzen, können Sie stattdessen auf die Klassen “dark:” zugreifen. Umsetzung und Beispiele dazu finden Sie hier.
Hiermit können wir vorher definierte Attribute wie Schriftfarben mit CSS einfach überschreiben, sollte der Benutzer den Darkmode bevorzugen.
Haben wir nun den Browser auf den Dunkelmodus eingestellt oder bereits eine Einstellung aktiv, welche die Einstellung des Betriebsystem berücksichtigt, sehen wir bei Erweiterungen unseres Codes nun andere Farben als Nutzer, die jene Auswahl nicht aktiv haben:
@media (prefers-color-scheme: dark) { body { color: #eee;
background: #121212 } body a { color: #809fff }}
Je nach Ihrer/Deiner Einstellung sehen Sie/siehst Du den Codepen nun schwarz auf weiß — oder andersherum:
Statt der Abfrage nach der bevorzugter-Farbwahl “dark” gibt es auch die Möglichkeit das Ganze umgekehrt aufzubauen.
Ps: Mit umgekehrt ist nun nicht “invert” gemeint, was es ebenfalls in Google Chrome als Media Query gibt.
Wir könnten natürlich auch erst dunkle Farben vergeben und bei bevorzugtem hellem Design diese Definitionen überschreiben.
Farben
In dem Beispiel oben ist kein “klares” weiß oder schwarz, statt dem Hex-Code für weiß #f00 und schwarz #000 werden hier sanftere Farben gewählt. Auch eine leicht abgesoftere Farbwahl kann um einiges angenehmer sein. Ausnahme sind vermutlich dann CTA Elemente, die hervorstechen sollen.
Das ist aber Geschmacksache, so wie das für deine Webseite erstelle CD (Corporate Design). Persönlich finde ich die Farben von TailwindCSS ein gutes Beispiel.
Denk bei der Farbwahl aber an Menschen mit einer Seh-Einschränkung. Der Kontrast von Hinter- zu Vordergrundfarbe sollte nicht zu schwach sein.
Wer der englischen Sprache mächtig ist, kann sich hierzu auch gerne dieses Video von Google Design zum Thema “Gestalten eines Dark Themes mit Material” anschauen. Alternativ ist hier auch ein Artikel dazu.
In Chrome können Sie den Contrast des Textes (Hintergrund zu Vordergrund) nun einfach anschauen. Rocket Mortgage Technology hat hierzu eine Anleitung veröffentlicht.
Bilder
Inhaltsbilder
Im Gegensatz zu einem ausreichend starken Kontrast zur Lesbarkeit bei Text, sollte der Kontrast der Bilder im Darkmode nicht zu stark sein.
Die Umfrage von Thomas Steiner zeigte auch, dass die befragten Personen etwas weniger grelle bzw lebendige Bilder bevorzugen, wenn der Dunkelmodus aktiv ist.
Auch wenn hier keine Antworten mehr zulässig sind, kann man sich über diesen Link den Effekt anschauen:
Eine Lösung wäre dann ein für beide Farbschematas gleichermaßen optimale Bilder zu verwenden, oder per CSS bspw einen Graufilter einzustellen. Dieser kann über die gleiche Media Query definiert werden. Ein Beispiel finden Sie hier beim Abschnitt “Re-Colorization in Practice”.
Bilder welche einen weißen Hintergrund haben und einen weichen optischen Übergang garantierten, können sich nun farblich stark abgrenzen und wie Kacheln wirken. Auch wenn das logisch scheint, gilt es dies zumindest mal getestet zu haben. Wenn das Bild daher mehrere Farben hat, kann hier vielleicht schon ein transparenter Hintergrund beim erneuten Exportieren reichen.
Zum Testen kannst du die Modis im System natürlich umstellen oder in Chrome emulieren.
Kreation
Falls das Thema “Darkmode” nun auf deiner Agenda stehen sollte und du einen kreativen Ansatz hast, schreib es gerne in die Kommentare.
Beispiel Content
Auch wenn Darkmode nicht gleichbedeutend mit Abend ist, könnte ich mir dies (in Verbindung mit Switches/Toggles) vorstellen. Ein Bild eines Restaurant bei Tag und eines bei Nacht (von der Bar).
P.s. Eine Abfrage der Uhrzeit mit JavaScript wäre hier natürlich auch möglich.
<picture>
<source srcset="restaurant-night.jpg" media="(prefers-color-scheme: dark)">
<img src="restaurant-day.jpg" alt="Restaurant (...)">
</picture>Ein weiterer kreativer Einsatz wäre im Getränkesektor: Bei Drücken des Schalters wird das Headerbild von der Limo zur Cola — oder andersherum je nach Kontrast.
Als kleines Goodie: Bei zu schnellem drücken eine Mezzomix :-)
Zwischenstand
Wir haben bisher:
- Einen ausreichend starken Kontrast von Textfarbe zu Hintergrundfarbe
- Dabei dennoch nicht zu grelle Kontraste der allgemeinen Farben
- Bilder, die im Light-Mode greller sind, hingegen bei Darkmode abgeschwächt
- Schriften im Darkmode auf schwarz stärker als in Darkmode (Font-Weight)
Favicons
Favicons sind in der Regel kleine Logos der Webseite, die in der Browserbar als kleines Symbol ausgegeben werden. Hiermit kann man sich, gerade wenn man viele Tabs offen hat, schneller orientieren. Solltest du in Chrome nicht gerade ein Design installiert haben, ist die Browserbar in weiß oder schwarz zu sehen.
Auch wenn die Technik bereits seit 2019 in der Lage ist, nimmt es doch gerade in jüngster Zeit eher Fahrt auf. Das mag, zumindest in meiner Umgebung, aber auch mit dem Einzug in die Mac-Welt zu tun haben.
Webseiten, die ich nun mit eingeschaltene Darkmode navigiere, zeigen gehäuft ein Logo auf weißen Hintergrund auf einer schwarzen Browserbar. Das sieht nicht allzuschön aus.
Auch hier gibt es allerdings die Möglichkeit verschiedene Favicons auszugeben, eines für den Dark- und eines für Lightmode.
Zu der technischen Umsetzung mit SVG und Wordpress habe ich einen Artikel auf DEV.TO veröffentlicht:
Solltest du statt einer statischen Seite (bspw reine HTML-Seiten oder mit einem Static Site Generator wie GoHugo), eine Webseite mit dem CMS Wordpress bedienen, kann es für dich ggf sogar Sinn machen, ein Favicon für den Admin Bereich zu erstellen. Dann siehst du in deinen Chrome Tabs gleich, wo Du im Backend bist.
Alternative Lösung (für Anwender): Tabs in Chrome verwenden.
Signatur in Emails
Bestätigungsemails, Newsletter oder Rückmeldungen auf die Email, auch hier kommen Logos als Signatur vor. Sollte das Logo relativ dunkel gehalten sein, kann es u.U. farblich untergehen:
Lösungsansätze
- Sollte das CD ein Logo oder eine Farbwahl enthalten, die man für beide Farbschematas verwenden kann, könnte dies eine Möglichkeit sein.
- Rapidmail empfiehlt als alternative Lösung eine Outline zu verwenden.
- Campaignmonitor für gewisse unterstütztende Email Clients eine CSS Media Query.
- Aus Gründen der Datensparsamkeit sowie der Sicherheit (Stichwort: Verbindungsaufbau Server; Log Files …) wären hier natürlich als Alternative auch einfache Textnachrichten möglich. Das wird, in mancher Netiquette, nicht zuletzt auch aus Sicherheitsgründen teilweise sogar vorausgesetzt.
Für welche Umsetzung hast du dich entschieden oder sogar noch weitere Ideen ? Bin auf deine Rückmeldung gespannt.
Hier Beispiele der Umsetzung von Campaignmonitor, Rapidmail, Mailgun, Litmus [1][2] und Emailonacid.
Schriften
Derselbe Text wirkt optisch schwarz auf weiß größer und kräftiger als andersrum. Um eine konsistente visuelle Gestaltung zu ermöglichen, kann man bei Darkmode die Textdicke/Textstärke reduzieren.
Achten Sie dabei darauf dass Sie die Schriftdicke auch tatsächlich mitgeladen haben.
h1 { font-weight: 400}@media (prefers-color-scheme: dark) { h1 { font-weight: 350 }}
Hier noch ein Beispiel wo man dies gut sehen kann:
Inhalt
Mit der Media Query können wir auch ganzen Inhalt ein- oder ausblenden.
Das kann Sinn machen wenn gleich mehrere Elemente ausgetauscht werden müssen oder ein Bild ein Bildunterschrift hat.
Eine Modifikation und Erweiterung um Show/Hide-Klassen dieses Beispiels würden dies in der Praxis ermöglichen.
Glossar
CD — Corporate Design, Unternehmens-Erscheinungsbild
CTA — Call to Action, Handlungsaufforderung
Viel Erfolg und Spaß bei der Umsetzung.
