How to rock the Darkmode (DE) 🌚

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.

Can I use prefers-color-scheme on https://caniuse.com/?search=prefers-color-scheme
Can I use prefers-color-scheme auf https://caniuse.com

Mittlerweile ist es aber auch direkt in den marktfĂŒhrenden und aktualisierten Betriebssystemen möglich, systemweit auf den Dunkelmodus umzustellen.

Beispiel bei MacOs:

Dunkelmodus aktivieren auf support.apple.com

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.

Hier ein Beispiel von Michael Richins von Codepen.

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.

Bild von Zach Lucero von Unsplash

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.

Ambient Light Sensor auf Caniuse

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) {}

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:

CodePen Prefers Color Scheme: Demo Use Case (Fork)

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.

Ausschnitt der Farben von TailwindCSS

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.

How to Design a Dark Theme Using Material (Google I/O’19)

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:

Dark Mode Colors

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.

Foto von The Free Birds auf Unsplash
<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:

  1. Einen ausreichend starken Kontrast von Textfarbe zu Hintergrundfarbe
  2. Dabei dennoch nicht zu grelle Kontraste der allgemeinen Farben
  3. Bilder, die im Light-Mode greller sind, hingegen bei Darkmode abgeschwÀcht
  4. 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.

Beispiel unbearbeitetes Logo in E-Mail-Signatar (Outlook)

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:

Beispiel unbearbeitetes Logo in E-Mail-Signatar (Outlook)

LösungsansÀtze

  1. Sollte das CD ein Logo oder eine Farbwahl enthalten, die man fĂŒr beide Farbschematas verwenden kann, könnte dies eine Möglichkeit sein.
  2. Rapidmail empfiehlt als alternative Lösung eine Outline zu verwenden.
  3. Campaignmonitor fĂŒr gewisse unterstĂŒtztende Email Clients eine CSS Media Query.
  4. 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.

Bild von Daltonmaag

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:

Pen von Robin Rendle auf Css-Trics

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.

Julian

--

--

Runs on Mate, Coffee & Coding đŸ”â˜• đŸ’» / Developer đŸ‘šâ€đŸ’» / Dad 👹‍👩 “My interests include family, tech stuff, nerdish things
”

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jolution

Jolution

Runs on Mate, Coffee & Coding đŸ”â˜• đŸ’» / Developer đŸ‘šâ€đŸ’» / Dad 👹‍👩 “My interests include family, tech stuff, nerdish things
”