Farbschemas unterstützen mit CSS

Es gibt viele Möglichkeiten, die Darstellung des Computers anzupassen. Von der Schriftgröße über Animationen bis hin zu Farben bietet das Betriebssystem vielfältige Einstellmöglichkeiten. Eine bekannte Einstellung – auch gern von Entwickler*innen verwendet – ist das Farbschema auf dunkel zu setzen. In diesem Artikel lernt ihr, wie ihr diese und andere Farbeinstellungen mit Hilfe von CSS aufgreift.

Helles Schema, dunkles Schema, Kontrastmodus

Standardmäßig ist auf den meisten Geräten ein helles Schema aktiv: dunkle Schrift auf hellem Hintergrund. Im dunklen Schema ist es umgekehrt – helle Schrift auf dunklem Grund. Auch die anderen Interface-Elemente passen sich entsprechend an. Diese Einstellung gibt es bei allen gängigen Betriebssystemen, auch auf Smartphones. Das ist aber nicht die einzige Möglichkeit, um die Farben der Darstellung zu optimieren. In Windows gibt es zum Beispiel noch den Kontrastmodus, mit dem man die Farben des Betriebssystems und aller Apps anpassen kann. Dazu später mehr.

Farbschema mit einem Media-Query abfragen

Damit die Nutzer*innen mit dunklem Farbschema nicht von eurer Website geblendet werden, solltet ihr auch Farben für das dunkle Schema festlegen. In CSS kann man mit dem Media-Query prefers-color-scheme die aktuelle Einstellung abfragen. Der Query hat die Werte „none“, „light“ und „dark“. Bei „none“ solltet ihr standardmäßig das helle Farbschema anzeigen. Das folgende Beispiel zeigt, wie es aussehen könnte, wenn ein Element speziell für das dunkle Schema gestylt wird.

Mit diesem CSS:

1.styled-with-media-query {
2  background: #cedce8;
3  color: #3d4245;
4  padding: 1rem 1rem;
5}
6
7@media (prefers-color-scheme: dark) {
8  .styled-with-media-query {
9   background: #3d4245;
10   color: #cedce8;
11  }
12}

Und diesem HTML:

1<div class="styled-with-media-query">This box looks good in light & dark theme</div>

Sieht die Box unterschiedlich aus, je nach Schema:

Farbschema testen

Zum Testen eures Styles ist es etwas mühselig, das Schema ständig im Betriebssystem zu ändern. Je nach Browser kann man das auch mit Hilfe der Entwicklertools testen.

Im Chrome findet ihr eine entsprechende Einstellung auf der Rendering Pane. Diese öffnet ihr am Einfachsten über das Befehlsmenü in den Entwicklertools (Strg + Shift + P (Windows) bzw. Cmd + Shift + P (Mac)). Im Menü die Rendering Pane auswählen, und unter der Option „Emulate CSS media feature prefers-color-scheme“ die entsprechende Einstellung auswählen.

Im Firefox kann das ebenfalls in den Entwicklertools eingestellt werden: Auf der Inspector-Pane, in der Übersicht über die Styles, die kleine Sonne oder den Mond anschalten, um dunkles oder helles Design einzustellen.

Für das Gesamterlebnis: color-scheme

Um den Support für helles und dunkles Schema zu vervollständigen, solltet ihr noch die Property color-scheme setzen. Damit könnt ihr angeben, welche Farbschemata eure Seite unterstützt. Mit dem folgenden CSS legt ihr z.B. fest, dass eure Seite beide Schemata unterstützt:

1:root {
2    color-scheme: light dark;
3}

Die Auswirkung ist auf den ersten Blick nicht klar, denn eure Seite scheint in beiden Schemata gleich auszusehen, solange ihr sie nicht explizit für hell und dunkel stylt. Wenn ihr genauer hinseht, erkennt ihr aber einen feinen Unterschied: Systemelemente wie zum Beispiel Scrollbalken oder Formularelemente passen sich jetzt dem gewählten Schema an. Im nächsten Bild sehen wir, wie es im dunklen Schema auf Mac aussieht, je nachdem, ob color-scheme gesetzt ist oder nicht:

Mit der color-scheme Property integriert ihr die Seite also noch ein Stück besser in das gewählte Farbschema.

Ganz neu: die light-dark Funktion

Die neue light-dark Funktion bietet die Möglichkeit, die Farben für das helle und dunkle Schema in einem Schritt zu spezifizieren, ganz ohne Media-Query.

Um sie zu nutzen, muss color-scheme: light-dark gesetzt sein (am Besten in Pesudo-root-Element wie oben beschrieben). Danach könnt ihr eure Elemente wie folgt stylen:

1.styled-with-light-dark {
2  color: light-dark(#3d4245, #cedce8);
3  background-color: light-dark(#cedce8, #3d4245);
4  padding: 1rem 1rem;
5}

Der erste Farbwert ist für das helle, der zweite für das dunkle Farbschema, und wird entsprechend angewandt.

Die Funktion ist neu in CSS seit Februar 2024, und sollte mittlerweile von allen großen Browsern unterstützt werden. Am besten schaut ihr bei Can I Use nach, wie der Support aktuell ist und implementiert ggf. noch einen Fallback. In meinem Praxistest verhielt sie sich im Dezember 2024 etwas buggy in Chrome, und in IntelliJ wurde sie als Fehler angezeigt.

Kontrastmodus

Wie oben erwähnt gibt es in Windows noch eine andere Einstellung, die sich auf die Farbgebung auswirkt: der Kontrastmodus. In diesem Modus ist die Farbpalette reduziert. Das wirkt sich auf das komplette Betriebssystem und auf alle Websites aus: Alle Farben, die ihr auf eurer Seite festgelegt habt, werden überschrieben. Ja, ihr habt das richtig gelesen, eure Farben sind weg, auch eure Brandfarben. 😯 Unsere Blogwebseite sieht in diesem Modus mit dem Theme “Wüste” zum Beispiel so aus:

Es gibt in dem Modus jeweils nur noch eine einzige Farbe für so etwas wie Text, Hintergrund, oder Buttons. Das sind die sogenannten Systemfarben.

Systemfarben

Systemfarben sind die Farben, mit denen Elemente im Betriebssystem und nativen Apps standardmäßig gerendert werden. Nutzer*innen können diese Farben ändern durch das Wählen eines Farbschemas oder auf Windows auch mit dem Kontrastmodus.

Solltet ihr nicht auf Windows unterwegs sein, könnt ihr die Farben zumindest im Browser beeinflussen: Firefox bietet dazu entsprechende Einstellungen; für andere Browser gibt es eine Vielzahl an Plugins, die unter den Stichwörtern "High Contrast" oder "Dark mode" zu finden sind.

In CSS sind diese Farben abgebildet über den Datentyp system-colors. Zum Beispiel gibt es die system-color Canvas für den Hintergrund, und CanvasText für den Text. Je nach Browser fallen die Farben aber bei gleichem Farbschema unterschiedlich aus. Das untenstehende Bild zeigt einen Vergleich zwischen system-colors auf drei verschiedenen Browsern auf dem Mac:

Systemfarben und Kontrastmodus

Systemfarben können wie ganz normale Farben im CSS zum Styling benutzt werden. Auf Websites, wo das Branding wichtig ist, macht es aber nicht so richtig viel Sinn. Anders sieht es aus, wenn man bestimmte Elemente für den Kontrastmodus stylen möchte.

Im Allgemeinen funktioniert die Darstellung im Browser für den Kontrastmodus gut und man braucht keine speziellen Styles. Es gibt allerdings ein paar Ausnahmen:

• Wenn ihr Farben als Unterscheidungsmerkmal benutzt, funktioniert das nicht im Kontrastmodus (und es ist allgemein auch eine schlechte Idee, da nicht barrierefrei. Siehe WCAG 1.4.1).
• Schatten werden nicht gerendert. Habt ihr Elemente, bei denen Schatten wichtig sind, müsst ihr für den Kontrastmodus auf ein anderes Styling ausweichen.
• SVGs, die als Icons genutzt werden, färben sich nicht automatisch mit um.

Um spezielle Styles für den Kontrastmodus festzulegen, gibt es den Media-Query forced-colors. In Kombination mit den Systemfarben könnte ein entsprechender Style zum Beispiel so aussehen:

1.box-with-shadow {
2 padding: 1rem 1rem;
3 box-shadow: 10px 5px 5px red;
4}
5@media (forced-colors: active) {
6 .box-with-shadow {
7  border: 1px dashed ButtonBorder;
8 }
9}

Zusammenfassung

Um Nutzereinstellungen für Farben zu berücksichtigen, gibt es mehrere Anknüpfungspunkte:

• Mit dem Setzen von “color-scheme: light dark;” im Root-Pseudo-Element die native Unterstützung von Farbschemata einschalten.
• Styles entsprechend anpassen mittels dem Media-Query prefers-color-scheme oder der light-dark-Funktion.
• Maximale Kompatibilität auch für den Kontrastmodus erreichst du mit dem Einsetzen von Systemfarben.

Für weitergehende Infos zum Thema empfehle ich dir diese Artikel:

• Einen Toggle für das Farbschema einbauen: Native HTML light and dark color scheme switching
• Deep-Dive in den forced-colors Media Query: Forced-colors explained