Wie Sie Ihre Website mit CSS an den Dark Mode anpassen

Der Dark Mode ist beliebt und sieht schick aus. Darüber hinaus ist er augenschonender und – zumindest auf OLED-Displays – energiesparender. Denn dunkle Farben brauchen auf OLED-Displays, wie sie oft bei Smartphones und Tablets eingesetzt werden, weniger Energie, und somit trägt der Dark Mode auch zur Klimafreundlichkeit von Websites bei. Ob Anwendungen im Dark Mode angezeigt werden sollen, kann im Betriebssystem festgelegt werden.

Leider stößt man beim Surfen im Internet häufig auf Websites mit hellem Schema – heller Hintergrund und dunkle Schrift. Es wäre viel schöner, wenn Websites die Präferenzen der Nutzer respektieren und eine angepasste Version im Dark Mode anbieten würden.

Dass sich dies lohnt, zeigt ein Artikel bei web.dev. Hier wird beschrieben, wie eine Website durch die Bereitstellung eines Dark Modes eine geringere Bounce Rate und mehr Seitenaufrufe pro Sitzung erzielte.

Dark und Light Mode bei der Suchmaschine Ecosia

Wie sich der Dark Mode am besten umsetzen lässt und was dabei zu beachten ist, lesen Sie im folgenden Artikel.

Media Query in CSS

Sie können mit CSS darauf reagieren, wenn jemand den Dark Mode aktiviert hat, und eine angepasste Version der Website bereitstellen. Das bedeutet, dass eigene Formatierungen nur im Dark Mode angewendet werden. Im einfachsten Fall sieht das so aus:

In diesem Beispiel wird dem body-Element im Standardmodus eine weiße Hintergrundfarbe und eine braune Schriftfarbe zugewiesen. Wenn der Dark Mode aktiviert ist (prefers-color-scheme: dark), werden stattdessen ein brauner Hintergrund und eine weiße Schriftfarbe festgelegt.

Wenn Sie CSS Nesting verwenden möchten, können Sie den gerade gezeigten Code auch kürzer schreiben:

Testen im Browser

Um auszuprobieren, ob die Definitionen für den Dark Mode funktionieren, müssen Sie nicht die Einstellungen im Betriebssystem ändern. Dies ist auch direkt im Browser möglich.

Öffnen Sie zunächst die Entwicklertools. Dies geht in allen Browsern über einen Rechtsklick und die Auswahl von Untersuchen oder Element untersuchen. Der weitere Ablauf variiert je nach Browser:

Chrome: Nachdem Sie die Elemente aktiviert haben, sehen Sie rechts den Bereich Stile. Oberhalb befindet sich eine Leiste mit mehreren Symbolen, darunter auch ein Farbpinsel. Ein Klick darauf ermöglicht es Ihnen, zwischen Dark und Light Mode zu wechseln.
Firefox: Wenn Sie den Inspektor auf der linken Seite aktiviert haben und die Regeln auf der rechten Seite sehen, können Sie in der Leiste oberhalb der Regeln auf das Sonnensymbol (Light Mode) oder das Mondsymbol (Dark Mode) klicken, um den jeweiligen Modus zu aktivieren.

Besser mit Custom Properties

Bei echten Projekten genügt es natürlich nicht, nur die Farben für body anders zu definieren, da Farben in der Regel mehrmals vorkommen. Daher ist es sinnvoll, CSS Custom Properties zu nutzen.

Für :root, also das html-Element, definieren wir zwei Variablen: eine für den Hintergrund (–background-color) und eine für die Textfarbe (–text-color). Die Variablennamen müssen mit doppelten Bindestrichen beginnen:

:root { --background-color: white; --text-color: brown; }

Diese Farben werden dann in der Media Query für den Dark Mode neu gesetzt:

@media (prefers-color-scheme: dark) { :root { --background-color: brown; --text-color: white; } }

Und können anschließend verwendet werden:

body { background-color: var(--background-color); color: var(--text-color) }

Dieses Beispiel ist jedoch noch nicht optimal, da die Farben brown und white zweimal angegeben werden. Wiederholungen deuten darauf hin, dass der Code besser organisiert werden könnte. Deshalb definiert man häufig zunächst die grundlegenden Farbvariablen und weist diese dann den Variablen –background-color und –text-color zu. Diese können anschließend für das body-Element verwendet werden:

Der Vorteil dieser Methode ist, dass wir die Farben bei Bedarf einfach anpassen können. Wenn wir beispielsweise anstelle des strahlenden Weiß (white) eine leicht angepasste Version wie #efefef verwenden möchten, müssen wir dies nur an einer Stelle ändern.

Zukunftsfarben

Es ist etwas mühsam, alle Farbangaben für beide Zustände einzeln zu definieren. Kürzer geht es mit der light-dark()-Funktion in CSS. Zuerst müssen Sie dafür die Eigenschaft color-scheme setzen (dazu später mehr Details). Danach können Sie light-dark() verwenden. Diese Funktion erwartet in runden Klammern zuerst die Farbe für den Light Mode und nach einem Komma die Farbe für den Dark Mode.

:root { color-scheme: light dark; }

body { background-color: light-dark(white, brown); color: light-dark(brown, white) }

Die light-dark()-Funktion ist in Chrome ab Version 123, in Safari ab 17.5 und in Firefox ab 120 implementiert.

Farbschema entwickeln

Allein die Anpassung von Hintergrund- und Vordergrundfarben reicht natürlich nicht aus. Was ist mit den Farben für Hervorhebungen? Wie sollten diese geändert werden? Welche Farbtöne sind für sekundäre Farben oder für Warnungen und besondere Hinweise am besten geeignet?

Ein gutes Beispiel, wie solche Anpassungen sinnvoll umgesetzt werden können, bieten die Systemfarben der Browser. Systemfarben sind spezielle Farben, die von Betriebssystemen und Browsern definiert werden, um eine einheitliche Darstellung von Benutzeroberflächen zu gewährleisten.

Ein Ausschnitt dieser Systemfarben in Firefox ist in der nächsten Abbildung zu sehen. Hier sieht man, dass Linktexte im Light Mode blau sind, im Dark Mode hingegen ein helles Lila haben. Besuchte Links sind im Light Mode lila und im Dark Mode rosa. Auch kleine Details ändern sich: Der Rahmen um Buttons ist im Light Mode hellgrau und im Dark Mode dunkelgrau.

Es muss ein vollständiges und stimmiges Farbschema entwickelt werden. Hier einige Tipps dazu:

Hintergrundfarbe: Schwarz als Hintergrundfarbe für das gesamte Dokument ist ungünstig, falls man noch eine dunklere Farbe für Schatten oder Ähnliches benötigt. Besser ist es, dunkles Grau zu verwenden, sodass Schwarz weiterhin für Akzente eingesetzt werden kann.
Moduswechsel: Beim Wechsel zwischen Dark und Light Modus sollte man nicht einfach alle hellen Farben in dunkle Farben ändern und umgekehrt. Schatten z.B. sind im Light Mode üblicherweise dunkel und sollten das auch im Dark Mode bleiben, da helle Schatten irritierend wirken.
Gedämpfte Farben: Im Dark Mode verwendet man üblicherweise weniger grelle Farben.

Tipp: Eventuell können Farbanpassungen mithilfe der hsl()-Farbfunktion sinnvoll sein. Bei hsl() bestimmen Sie zuerst den Farbton (hue), gefolgt von Sättigung (saturation) und Helligkeit (lightness).

background-color: hsl(30, 100%, 50%)

Für Farbanpassungen können Sie nur Helligkeit und Sättigung verändern, aber den eigentlichen Farbton beibehalten.

Formularelemente

Einige Elemente erfordern eine besondere Behandlung. Formularelemente haben durch die Default-Browser-Stylesheets einen hellen Hintergrund und nicht den Defaultwert transparent. Deswegen passen sie sich nicht automatisch an, wenn die Hintergrundfarbe bei body geändert wird. In Firefox erhält z.B. ein textarea-Element standardmäßig den Wert Field für background-color. Daher müssen Hintergrundfarben für Formularelemente überschrieben werden:

textarea, select, input:not([type="button"] { background-color: gray; }

Ein weiterer Punkt betrifft die Farbe von Radiobuttons oder Schiebereglern. Diese und andere UI-Kontrollelemente können Sie mittlerweile dank der accent-color-Eigenschaft einfach anpassen:

html { accent-color: #0066cc; } @media (prefers-color-scheme: dark) { html { accent-color: #ff6600; } }

Ein Beispiel finden Sie bei CodePen.

Zum CodePen-Beispiel

Mit accent-color angepasste Formularelemente

Icons und Bilder anpassen

Auch Bilder sollten angepasst werden. Je nach Bildtyp sind dabei unterschiedliche Strategien möglich.

Bei SVG-Icons können Sie mit currentColor dafür sorgen, dass sich die Iconfarbe an die Textfarbe des Kontexts anpasst. Hier ein kleines Beispiel mit einem Kreis als Icon. Um sicherzustellen, dass er sich an die Textfarbe der Umgebung anpasst und auf den Dark/Light-Modus reagiert, erhält er die Eigenschaft fill=“currentColor“:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="currentColor" /> </svg>

Icons sind üblicherweise oft einfarbig, daher genügt es, wenn sie sich an die Schriftfarbe anpassen. Bei Bildern ist das etwas komplizierter. Ob und wie Bilder geändert werden müssen, hängt vom Kontext ab. Wichtig ist, dass das Design in beiden Modi konsistent und ansprechend bleibt. Bilder mit hellen Hintergründen können im Dark Mode blendend wirken, was die visuelle Harmonie stören oder die Lesbarkeit behindern kann.

Zur Anpassung der Bilder haben Sie verschiedene Optionen:

Filter verwenden: Sie können Filter nutzen, um die Farben anzugleichen, z. B. den grayscale()-Filter:

.image { filter: none; } @media (prefers-color-scheme: dark) { .image { filter:grayscale(50%) } }

Es gibt viele verschiedene Filter in CSS, für den Dark Mode sind neben grayscalce() besonders invert() oder brightness() geeignet.

Unterschiedliche Bilder je nach Modus: Wenn Sie komplett unterschiedliche Bilder für Light und Dark Mode benötigen, können Sie das picture-Element verwenden:

Automatische Anpassungen mit color-scheme

Es kann sehr aufwändig sein, für alle Elemente einzeln die Farben zu bestimmen. Könnte der Browser das nicht einfach automatisch machen? Auch das ist möglich. Sie haben oben gesehen, wie das Farbschema von Firefox für den Dark und Light Mode aussieht. Wenn Sie möchten, dass dieses verwendet wird, ergänzen Sie in Ihrem Stylesheet:

:root { color-scheme: light dark; }

Damit werden automatisch Anpassungen vorgenommen, überall dort, wo Sie selbst keine Farben definiert haben. Das bedeutet zum Beispiel weiße Schrift auf schwarzem Hintergrund im Dark Mode und umgekehrt im Light Mode, blaue Links im Light Mode, lilafarbene im Dark Mode etc.

Diese Angabe hat den Vorteil, dass alles, was Sie nicht selbst ändern, in vernünftigen Browser-Defaults gesetzt wird: Wenn Sie also keine Angaben für die Hintergrundfarbe von input-Elementen gemacht haben, wird bei Firefox die Systemfarbe Field verwendet, die je nach Modus hell oder dunkel ist.

Bei der Eigenschaft color-scheme können Sie aber auch als Wert nur dark angeben, oder Sie verhindern mit only dark, dass der Browser automatisch einen selbstgenerierten Dark Mode anwendet.

Übrigens können Sie statt der CSS-Eigenschaft color-scheme auch eine meta-Angabe im HTML-Code verwenden:

<meta name="color-scheme" content="light dark">

Damit definieren Sie, dass überall, wo Sie keine eigenen Farbangaben gemacht haben, die für den Modus passenden Systemfarben verwendet werden. Allerdings setzen Sie mit der meta-Angabe die Einstellung für das gesamte Dokument. Die CSS-Eigenschaft color-scheme erlaubt es hingegen, diese automatische Anpassung nur für einzelne Bereiche zu definieren, indem Sie die Eigenschaft nur bei einzelnen Selektoren angeben.

Angepasste Scrollbalken und Co.

Auch die Farben der Scrollbalken und anderer Elemente lassen sich ändern. Dafür brauchen Sie eine meta-Angabe mit einer Media Query:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

Im Screenshot sehen Sie links den angepassten Scrollbalken mit der meta-Angabe, rechts ohne Anpassung.

Das funktioniert derzeit in Chrome und ähnlichen Browsern, allerdings noch nicht in Firefox.

Mit opt-in und opt-out

Kommen wir noch einmal zurück zur Media Query. Es ist wunderbar, wenn die Website automatisch auf die Einstellungen der Besuchenden reagiert. Was aber, wenn die Nutzer die konkrete Website im hellen Modus sehen möchten, obwohl sie im Betriebssystem den Dark Mode gewählt haben?

Eine bessere Lösung ist es, eine dritte Option anzubieten: Die Möglichkeit, die Systemeinstellungen zu überschreiben, also ein Opt-out aus der voreingestellten Darstellung. Dabei ist es wichtig, dass diese Auswahl gespeichert wird, damit die Nutzer die Einstellung nicht bei jedem Seitenaufruf neu vornehmen müssen.

Für diese Lösung benötigen Sie JavaScript. Zum Speichern der Benutzerpräferenzen eignet sich localStorage. Ein Beispielscript, wie dies umgesetzt werden kann, finden Sie bei Bootstrap.

Chrome: automatischer Dark Mode

Seit Version 96 hat Chrome eine Einstellung integriert, die automatisch den dunklen Modus aktiviert. Ihre Website wird entsprechend angepasst.

So können Sie testen, wie Ihre Website in diesem Modus aussieht:

Klicken Sie bei aktivierten Entwicklertools auf das Dreipunkt-Menü ganz rechts.
Wählen Sie Weitere Tools und dann Rendering aus.
Klicken Sie Automatischen dunklen Modus aktivieren.

Falls gewünscht, können Sie den automatischen Dark Mode auch deaktivieren, indem Sie die folgende meta-Angabe verwenden:

<meta name="color-scheme" content="only light">

Oder über CSS:

:root { color-scheme: only light; }

Allerdings sollte dies keine dauerhafte Lösung sein, denn der Dark Mode ist ein nützliches Feature. Wenn die automatischen Anpassungen in Chrome nicht optimal sind, ist es besser, ein eigenes Dark-Stylesheet zu erstellen. Mit diesem Artikel haben Sie nun das nötige Rüstzeug dafür!

Titelmotiv: Photo by Luke Chesser on Unsplash

Über
Letzte Artikel

Florence Maurice

Florence Maurice ist Autorin und Trainerin für Webthemen mit Schwerpunkt CSS. Sie schreibt Bücher zu Webtechniken wie das Einstiegsbuch “HTML und CSS für Dummies”. Außerdem gibt sie Trainings per Video oder live. Mitunter bloggt sie zu Webthemen unter https://maurice-web.de/blog/.

Letzte Artikel von Florence Maurice (Alle anzeigen)