Dark Mode – Praktische Tipps für das eigene Webdesign

Dark Mode - Praktische Tipps für das eigene WebdesignWährend die dunkle Version einer Website früher zwar hier und da angeboten wurde, aber sicherlich kein Standard war, wird sie heutzutage von einigen Nutzern fast schon vorausgesetzt. Das hängt auch damit zusammen, dass Smartphones unseren Alltag bestimmen. Immer häufiger lesen wir daher noch schnell einen Artikel im Bett, wo die weißen Seiten dann stark blenden, wenn es um uns herum bereits dunkel geworden ist. Der Dark Mode scheint dann eine echte Erleichterung für die Augen zu sein.

Viel wichtiger allerdings ist, dass Apple und Co inzwischen einen Dark Mode als feste Option anbieten und diese Möglichkeit vereinfacht es, diesen auch für Websites auszuliefern, da er quasi direkt mit dem System zusammenarbeitet. Bislang war meist ein wenig Javascript notwendig, um den Dark Mode auf der eigenen Website umzusetzen, was nun aber nicht mehr zwingend erforderlich ist. Das macht die Sache somit bedeutend einfacher.

Welche Möglichkeiten es beim Dark Mode zurzeit gibt und welche davon besonders interessant sind, möchte ich euch in diesem Artikel aufzeigen. Nicht zuletzt auch deshalb, weil ich mich kürzlich für ein paar eigene Projekte sehr intensiv mit dem Thema befasst haben.

Besonderheiten beim Dark Mode auf Websites

Allerdings gibt es ein paar Besonderheiten, die es beim Dark Mode zu beachten gilt. Denn was im normalen Modus problemlos funktioniert, erscheint im Dark Mode immer wieder spezielle Eigenheiten hervorzurufen.

Das betrifft in erster Linie die Farben und die Tatsache, dass der dunkle Modus in der Regel am Abend verwendet wird.

So sollte ein Dark Mode für sich gedacht werden. Die Farben einfach zu invertieren, führt selten zum Erfolg.

Vielmehr sollte der Dark Mode ganz eigene Anpassungen erhalten, die jeweils auf das eigene Projekt zugeschnitten werden.

Was haltet ihr von einem Dark Mode für Websites?

Ergebnis anschauen

Folgende Punkte sind dabei besonders wichtig.

Schwarz nicht Schwarz, Weiß nicht Weiß

Schon klar, OLED-Displays gehen komplett aus, wenn sie schwarz sind, was dann wiederum Akku spart. Doch genau darum geht es beim Dark Mode in der Regel nicht, es geht um hohe Lesbarkeit und Ästhetik.

Schwarz darf deshalb nicht Schwarz sein und Weiß oft nicht weiß, weil das bei Nacht ebenfalls viel zu stark blendet.

Besser ist es, ein dunkles Grau zu verwenden und ein sehr helles Grau für den Fließtext. Das ist deutlich augenfreundlicher.

Farben anpassen

Wo wir gerade beim Thema sind, auch Farben können negativ auffallen. Zu dunkle Farbtöne heben sich beispielsweise auf sehr dunklem Hintergrund nicht stark genug ab.

Achtet also darauf, auch die Farben eurer Website »knalliger« zu gestalten, wenn dies notwendig sein sollte. Wirkt das alles zu sehr nach Neon, müssen sie eventuell auch abgeschwächt werden.

Bilder abdunkeln mit CSS-Filter

Helle Bilder wirken im Dark Mode oft etwas komisch und deplatziert. Weiße Bilder sind noch merkwürdiger, denn sie blenden plötzlich heraus. Hier kann es helfen, alle Bilder mit einem CSS-Filter zu versehen.

Der CSS-Befehl »filter: brightness(.9);« ist hier eine solide Empfehlung. Je nach Art der verwendeten Bilder könnt ihr den Wert natürlich noch anpassen.

Es geht am Ende nicht darum, die Bilder wirklich sichtbar abzudunkeln, es geht eher darum, ihnen den Blendeffekt auf dunklem Hintergrund zu nehmen.

Spielerei mit Favicons

Jetzt wird es spannend. Dank SVG-Favicons, die inzwischen von allen Browsern unterstützt werden, ist es möglich, Light- und Dark-Versionen der Favicons zu verwirklichen. Das kann im Browser ziemlich gut aussehen.

Allerdings wäre die Erklärung jetzt etwas zu technisch, weshalb ich an dieser Stelle einfach kurz auf diesen Blogartikel verweisen möchte, der das Thema Dark Mode Favicon genauer erklärt. Einfach mal reinlesen, wenn ihr euch für derartige Spielereien interessiert.

Testen, testen, testen – auch den Dark Mode

Was ich mit am wichtigsten finde ist, dass der Dark Mode auf unterschiedlichen Geräten und in echten Umgebungen getestet wird.

  • Auf dem Desktop sieht das alles immer gut aus, doch wie verhält es sich mitten in der Nacht oder bei Dämmerung?
  • Wie wirkt der dunkle Modus im Mondlicht und wie bei Kunstlicht in der eigenen Wohnung?
  • Wie auf einem iPhone mit True Tone vs. ohne?

Ich selbst bin einfach ein Freund der Echtwelt-Tests und rate stets dazu, alles unter echten Bedingungen auszuprobieren. Das ist oft einfach etwas anderes als die Theorie am Monitor.

Dark Mode - Praktische Tipps für das eigene Webdesign

Systemeinstellung nutzen

Die wohl einfachste Möglichkeit, die es zurzeit gibt, einen Dark Mode für die eigene Website umzusetzen, sind die Systemeinstellungen. Es gibt dafür nämlich einen Parameter, der auch online und via CSS angesprochen werden kann. Das funktioniert dann ähnlich wie der Teil für Responsive Websites, ist also ein in sich geschlossener Abschnitt.

Praktisch an dieser Methode scheint, dass sie sehr einfach einzubauen ist. Ein paar Zeilen CSS-Code und entsprechende Anpassungen reichen bereits aus, um den Dark Mode zu realisieren. Meistens müssen nur die grundlegenden Farben getauscht werden, um ein dunkles Theme zu erschaffen.

Um einen Dark Mode in die CSS-Datei hinzuzufügen, solltet ihr folgenden Abschnitt integrieren und diesen dann ganz nach euren eigenen Ansprüchen anpassen. Unterstützt wird das Ganze ab MacOS Mojave, Windows 10, iOS 13 und Android 10. Alle modernen Browser unterstützen die Funktion ebenfalls.

@media (prefers-color-scheme: dark) {
	body {
		color: #FFFFFF;
		background: #000000;
	}
}

localStorage im Browser nutzen

Die etwas andere Methode für einen Dark Mode ist, den localStorage im Browser via Javascript anzusprechen. Dann wird der dunkle Modus über ein eigenes Theme realisiert, welches per Button gewechselt werden kann. Der Browser merkt sich die letzte Einstellung über den erwähnten localStorage.

Problem hierbei ist, dass der Einbau etwas umfangreicher ausfällt. Zum einen braucht es ein passendes Theme und ein paar Änderungen im Code, auch ein entsprechender Button muss von überall aus erreichbar sein, damit Nutzer den Modus wechseln können. Auch Javascript sollte aktiv sein und ein Script ist ebenso notwendig, damit alles korrekt funktioniert.

Für den Dark Mode mit localStorage gibt es hier ein schönes, sehr kurzes Copy & Paste Beispiel. Das geht nicht zu viel auf kleine Details ein, sondern zeigt direkt eine schnelle Methode, wie dieser Modus mit localStorage realisierbar ist.

Dark Mode im Webdesign – Pflicht oder Kür?

Die Einstellung im System, die via CSS angesprochen werden kann, hat die Sache mit dem Dark Mode endlich salonfähig gemacht. Vorher war es fast immer ein großes Hickhack und die Lösung mit den Buttons war auch nie besonders schön, da dieser natürlich irgendwo untergebracht werden mussten. Seit dieser nun aber nativ ansprechbar ist, ist er gleichzeitig zu einer Art Standard geworden. Jeder kann ihn umsetzen, es ist nur ein bisschen CSS notwendig.

Dark Mode - Praktische Tipps für das eigene Webdesign

Ob man sich am Ende für oder gegen einen Dark Mode entscheidet, hängt in erster Linie von den Ressourcen und den eigenen Nutzern ab. Zwingend notwendig ist er sicherlich noch nicht, doch wenn viele Leser abends vorbeischauen und dann unter Umständen den dunklen Modus am Smartphone aktiviert haben, fällt es schon sehr negativ auf, wenn eine Website sich diesbezüglich keine Mühe gegeben hat.

Persönlich denke ich, dass wir nun an einem Punkt angekommen sind, wo der Dark Mode eben mit dazugehört. Er ist vielmehr zur Normalität geworden, wird von Besuchern oft vorausgesetzt und macht tatsächlich auch Sinn. Vor allem deshalb, weil eben sehr viel am Smartphone konsumiert wird, wo die Lichtbedingungen beim Lesen eine größere Rolle spielen.

Heute will sich niemand mehr bei Nacht von einer Website anstrahlen lassen, nur weil dessen Betreiber keinen Dark Mode umgesetzt hat. Vielleicht ist es also an der Zeit, dass alle Websites einen diesen Modus erhalten.

Wie seht ihr das? Habt ihr schon eine Dark Mode für eure Website umgesetzt und wenn ja, welche Methode habt ihr verwendet?

6 Gedanken zu „Dark Mode – Praktische Tipps für das eigene Webdesign“

  1. Nicht wundern: Der Dark Mode ist bei mir auf der Website aktuell nicht verfügbar und wird erst mit dem nächsten Update eingespielt. Habe da noch viel getestet und für den Artikel nur ein Beispiel gebraucht. Nur falls der ein oder andere das ganze jetzt Live sehen möchte und sich wundert.

    Antworten
  2. Hallo Denny
    Vielen dank für deinen ausführlichen Artikel. Das Thema Dark Mode ist für mich sehr wichtig. Ich werde viele Tipps von dir gebrauchen können, um den Dark Mode auf meiner Webseite einzubinden. Vielen Dank

    Antworten
    • Danke für dein Feedback. Wie ich auf Denny gekommen bin, weiß ich jetzt auch nicht 🙂 Bin ja David. War wohl schon im verfrühten Feierabend. Aber schön, wenn meine Tipps geholfen haben.

      Antworten
  3. Hallo,
    danke für diesen Denkanstoß! Dieses Thema hatte ich für meine eigenen Websites bisher überhaupt nicht auf dem Schirm, es ist aber auf jeden Fall eine Überlegung wert. Mal schauen, wie einfach/schwierig sich die Umsetzung wirklich gestaltet – beim ersten Versuch gibt es ja meistens etwas, das nicht so klappt, wie es klappen sollte. 😉
    lg
    Seba

    Antworten
  4. Ich bin ja auch der totale Fan vom Dark Mode. Zum ersten Mal bin ich durch ein Apple Update (ich glaube im letzen Jahr?) darauf gestoßen. Schön, wenn man Tipps erhält wie man das auf eigenen Seiten umsetzen kann.

    Antworten

Schreibe einen Kommentar