Hell oder dunkel, je nachdem

Einige Benutzer stellen besondere Ansprüche an Websites, die bei der Entwicklung berücksichtigt werden müssen. Beispielsweise bereitet ein Übermaß an Bewegung, etwa durch Animationen, manchen Menschen Probleme - oder das “Gezappel” saugt schlicht schnell den Akku des Mobilgeräts leer. In diesem Fall kann die Website auf das CSS media feature prefers-reduced-motion reagieren, und eine Version mit reduzierter Bewegung anbieten.

Ein ähnlicher Fall ist der sogenannte Dark Mode. Statt wie meistens üblich dunkle Schrift und Symbole auf hellem Hintergrund zu verwenden, gibt es im Dark Mode helle Schrift und Symbole auf dunklem Hintergrund. Das kann bei Menschen mit sehr lichtempfindlichen Augen eine Erleichterung sein. Einige Benutzer empfinden einen gut gemachten Dark Mode aber auch ohne medizinischen Hintergrund einfach als angenehmer.

Welches Farbschema (Dark Mode oder Light Mode) ein Benutzer bevorzugt, kann er mit dem CSS media feature prefers-color-scheme übermitteln. Es gibt aber eine zusätzliche Möglichkeit, die insbesondere in weniger komplex gelagerten Fällen einfacher umzusetzen sein kann.

Die meisten Browser bieten sogenannte Systemfarben an. Dabei gibt man im CSS nicht den Namen einer Farbe an (z. B. cornflowerblue), oder einen Farbwert in einem Modell wie RGB oder HSL. Stattdessen gibt der Browser Farben für bestimmte Einsatzzwecke vor, zum Beispiel Canvas für den Hintergrund eines Dokuments oder CanvasText für den Text des Dokuments. Das heißt, anstelle von

body {
  background-color: #FCFCFC;
  color: #010101;
}

kann man

body {
  background-color: Canvas;
  color: CanvasText;
}

schreiben. Typischerweise wird für Canvas eine Farbe nahe Weiß verwendet, für CanvasText eine Farbe nahe Schwarz. Welcher Farbwert genau verwendet wird, hängt vom Browser ab. In den MDN Web Docs von Mozilla gibt es eine Übersicht über die verfügbaren Systemfarben.

Diese Systemfarben reagieren außerdem auf die CSS-Eigenschaft color-scheme. Setzt man im obigen Beispiel color-scheme auf dark, bekommt man hellen Text auf dunklem Grund, obwohl man weiterhin Canvas und CanvasText verwendet:

:root {
  color-scheme: dark;
}

body {
  background-color: Canvas;
  color: CanvasText;  
}

Wenn man sich nicht auf die verfügbaren Systemfarben beschränken will, hilft die CSS-Funktion light-dark() weiter. Die kann überall eingesetzt werden, wo ein Farbwert erwartet wird. Als Argumente nimmt die Funktion zwei Farbwerte, den ersten für den Light Mode, den zweiten für den Dark Mode. Um das Bespiel ganz zu Beginn dieses Artikels von color-scheme abhängig zu machen, könnte man beispielsweise schreiben:

 :root {
  color-scheme: dark;  
 }

 body {
  background-color: light-dark(#FCFCFC, #010101);
  color: light-dark(#010101, #FCFCFC);
 }

light-dark() ist in den meisten Browsern spätestens ab Versionen, die im Frühjahr oder Sommer 2024 erschienen sind, verfügbar.

In der Regel wird man, egal ob mit light-dark() oder nicht, die konkreten Farbwerte in CSS-Variablen verpacken (oder, falls verwendet, in Variablen eines Präprozessors wie Sass oder Less). Damit wird der Code leichter lesbar und wartbar. Das kann dann beispielsweise so aussehen:

 :root {
  color-scheme: dark;
  --light-bg-color: #FCFCFC;
  --dark-bg-color: #010101;
  --light-text-color: #010101;
  --dark-text-color: #FCFCFC;
 }

 body {
  background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
  color: light-dark(var(--light-text-color), var(--dark-text-color));
 }

Zu einem “ausgewachsenen” Dark Mode gehört natürlich noch mehr, beispielsweise die Anpassung von Symbolen und anderen Grafiken. Aber wenn man in dieser Form einfach zwei Farbwerte für Light Mode und Dark Mode vorgeben kann, ohne viel CSS in prefers-color-scheme duplizieren zu müssen, ist oft schon viel erreicht.