Verbessertes Standardstil im dunklen Modus mit der CSS-Eigenschaft „color-scheme“ und dem entsprechenden Meta-Tag

Mit der CSS-Eigenschaft color-scheme und dem entsprechenden Meta-Tag können Entwickler für ihre Seiten die themenspezifischen Standardeinstellungen des User-Agent-Stylesheets aktivieren.

Thomas Steiner

Hintergrund

Medienfunktion „prefers-color-scheme“ für Nutzereinstellungen

Mit der Medienfunktion prefers-color-scheme mit den Nutzereinstellungen haben Entwickler die volle Kontrolle über die Darstellung ihrer Seiten. Falls du damit nicht vertraut bist, lies meinen Artikel prefers-color-scheme: Hallo Dunkelheit, mein alter Freund, in dem ich alles dokumentiert habe, was ich über tolle Funktionen im dunklen Modus gelernt habe.

Ein Puzzleteil, das im Artikel nur kurz erwähnt wurde, sind die CSS-Eigenschaft color-scheme und das zugehörige Meta-Tag mit demselben Namen. Beide erleichtern Ihnen das Leben als Entwickler, da Sie für Ihre Seite themenspezifische Standardeinstellungen des User-Agent-Stylesheets aktivieren können, z. B. Formularsteuerelemente, Bildlaufleisten und CSS-Systemfarben. Gleichzeitig verhindert diese Funktion, dass Browser Transformationen anwenden.

Unterstützte Browser

prefers-color-scheme

color-scheme

User-Agent-Stylesheet

Bevor ich fortfahre, möchte ich kurz beschreiben, was ein User-Agent-Stylesheet ist. Meist ist das Wort User-Agent (UA) einfach wie Browser zu verstehen. Mit dem UA-Stylesheet wird das Standarddesign einer Seite festgelegt. Wie der Name schon sagt, hängt ein UA-Stylesheet vom jeweiligen UA ab. Sie können sich das UA-Stylesheet von Chrome (und Chromium) ansehen und es mit dem von Firefox oder Safari (und dem WebKit) vergleichen. In der Regel stimmen UA-Stylesheets größtenteils überein. Links werden beispielsweise alle blau, der allgemeine Text schwarz und die Hintergrundfarbe weiß. Es gibt aber auch wichtige (und manchmal störende) Unterschiede, z. B. bei der Gestaltung von Formularsteuerelementen.

Sehen Sie sich das UA-Stylesheet von WebKit und seine Auswirkungen auf den dunklen Modus an. Führen Sie im Stylesheet eine Volltextsuche nach "dark" (dunkel) durch. Die vom Stylesheet bereitgestellte Standardeinstellung ändert sich je nachdem, ob der dunkle Modus aktiviert oder deaktiviert ist. Zur Veranschaulichung sehen Sie hier eine solche CSS-Regel, die die Pseudoklasse :matches und WebKit-interne Variablen wie -apple-system-control-background sowie die WebKit-interne Präprozessor-Anweisung #if defined verwendet:

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

Sie werden einige nicht standardmäßige Werte für die oben genannten Eigenschaften color und background-color bemerken. Weder text noch -apple-system-control-background sind gültige CSS-Farben. Es sind WebKit-interne semantische Farben.

Wie es aussieht, verwendet CSS standardisierte semantische Systemfarben. Sie sind im Abschnitt CSS-Farbmodul – Stufe 4 angegeben. Beispielsweise ist Canvas (nicht zu verwechseln mit dem Tag <canvas>) für den Hintergrund von Anwendungsinhalten oder -dokumenten vorgesehen, während CanvasText für Text in Anwendungsinhalten oder -dokumenten steht. Beides sollte zusammengehören und nicht isoliert verwendet werden.

Für UA-Stylesheets können entweder eigene oder standardisierte semantische Systemfarben verwendet werden, um festzulegen, wie HTML-Elemente standardmäßig gerendert werden sollen. Wenn das Betriebssystem auf den dunklen Modus eingestellt ist oder ein dunkles Design verwendet, wird CanvasText (oder text) bedingt auf Weiß und Canvas (oder -apple-system-control-background) auf Schwarz gesetzt. Das UA-Stylesheet weist die folgenden CSS nur einmal zu und deckt sowohl den hellen als auch den dunklen Modus ab.

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

Die CSS-Eigenschaft color-scheme

In der Spezifikation CSS-Farbanpassungs-Modul Stufe 1 wird ein Modell eingeführt, mit dem die automatische Farbanpassung durch den User-Agent gesteuert wird. Dabei werden Nutzereinstellungen wie dunkler Modus, Kontrastanpassung oder bestimmte gewünschte Farbschemas berücksichtigt.

Mit der darin definierten color-scheme-Eigenschaft kann ein Element angeben, mit welchen Farbschemas es gerendert werden kann. Diese Werte werden mit den Einstellungen des Nutzers ausgehandelt, was zu einem ausgewählten Farbschema führt, das sich auf Elemente der Benutzeroberfläche (UI) auswirkt, z. B. die Standardfarben von Formularsteuerelementen und Bildlaufleisten sowie die verwendeten Werte der CSS-Systemfarben. Folgende Werte werden derzeit unterstützt:

• normal gibt an, dass das Element gar kein Farbschema erkennt. Daher sollte es mit dem Standardfarbschema des Browsers gerendert werden.

• [ light | dark ]+ gibt an, dass das Element die aufgeführten Farbschemata kennt und verarbeiten kann. Außerdem wird eine geordnete Präferenz zwischen ihnen ausgedrückt.

In dieser Liste steht light für ein helles Farbschema mit hellen Hintergrundfarben und dunklen Vordergrundfarben, dark das Gegenteil mit dunklen Hintergrundfarben und hellen Vordergrundfarben.

Durch das Rendern mit einem Farbschema sollten bei allen Elementen die Farben, die in der gesamten vom Browser bereitgestellten UI für das Element verwendet werden, dem Farbschema entsprechen. Beispiele hierfür sind Bildlaufleisten, Unterstreichungen bei der Rechtschreibprüfung und Formularsteuerelemente.

Beim :root-Element muss sich das Rendering mit einem Farbschema außerdem auf die Oberflächenfarbe des Canvas (d. h. die globale Hintergrundfarbe), den Anfangswert der color-Eigenschaft und die verwendeten Werte der Systemfarben auswirken. Außerdem sollte sich das Rendering auf die Bildlaufleisten des Darstellungsbereichs auswirken.

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

Das Meta-Tag color-scheme

Um die CSS-Eigenschaft color-scheme zu berücksichtigen, muss der CSS-Code zuerst heruntergeladen werden (wenn über <link rel="stylesheet"> darauf verwiesen wird) und geparst werden. Damit User-Agents den Seitenhintergrund mit dem gewünschten Farbschema sofort rendern können, kann in einem <meta name="color-scheme">-Element ein color-scheme-Wert angegeben werden.

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

color-scheme und prefers-color-scheme kombinieren

Da sowohl das Meta-Tag als auch die CSS-Eigenschaft (wenn sie auf das :root-Element angewendet werden) letztlich zum gleichen Verhalten führen, empfehle ich immer, das Farbschema über das Meta-Tag anzugeben, damit der Browser das bevorzugte Schema schneller übernehmen kann.

Für Seiten mit absoluter Referenz sind keine zusätzlichen CSS-Regeln erforderlich. Im Allgemeinen sollten Sie jedoch color-scheme immer mit prefers-color-scheme kombinieren. Beispielsweise hat die proprietäre WebKit-CSS-Farbe -webkit-link, die von WebKit und Chrome für die klassische Link-Blau-rgb(0,0,238) verwendet wird, auf schwarzem Hintergrund ein unzureichendes Kontrastverhältnis von 2,23:1 und nicht erfüllt sowohl die WCAG AA als auch die Anforderungen der WCAG AAA.

Ich habe Fehler für Chrome, WebKit und Firefox sowie ein Metaproblem im HTML-Standard nachgereicht, um dieses Problem zu beheben.

Mit prefers-color-scheme interagieren

Das Zusammenspiel der CSS-Eigenschaft color-scheme und des entsprechenden Meta-Tags mit der Nutzereinstellung prefers-color-scheme kann auf den ersten Blick verwirrend wirken. Sie funktionieren sogar sehr gut zusammen. Wichtig ist zu verstehen, dass color-scheme ausschließlich die Standarddarstellung bestimmt, während prefers-color-scheme die stilierbare Darstellung bestimmt. Gehen Sie zur Verdeutlichung von der folgenden Seite aus:

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

Durch den Inline-CSS-Code auf der Seite wird die background-color des <fieldset>-Elements im Allgemeinen auf gainsboro gesetzt und auf darkslategray, wenn der Nutzer ein dark-Farbschema gemäß der Medienfunktion prefers-color-scheme der Nutzereinstellungen bevorzugt.

Über das Element <meta name="color-scheme" content="dark light"> teilt die Seite dem Browser mit, dass ein dunkles und ein helles Design unterstützt wird, wobei ein dunkles Design bevorzugt wird.

Je nachdem, ob für das Betriebssystem der dunkle oder der helle Modus festgelegt ist, erscheint die gesamte Seite je nach User-Agent-Stylesheet hell auf dunkel oder umgekehrt. Es ist kein zusätzliches, vom Entwickler bereitgestelltes CSS erforderlich, um den Absatztext oder die Hintergrundfarbe der Seite zu ändern.

Wie sich das background-color-Element des <fieldset>-Elements ändert, hängt davon ab, ob der dunkle Modus aktiviert ist. Dabei werden die Regeln im vom Entwickler bereitgestellten Inline-Stylesheet auf der Seite befolgt. Entweder gainsboro oder darkslategray.

Die Darstellung des <button>-Elements wird durch das User-Agent-Stylesheet gesteuert. Für color ist die Systemfarbe ButtonText und für background-color und die vier border-color die Systemfarbe ButtonFace festgelegt.

Sehen Sie sich nun an, wie sich der border-color-Wert des <button>-Elements ändert. Der computed-Wert für border-top-color und border-bottom-color wechselt von rgba(0, 0, 0, 0.847) (schwarz) zu rgba(255, 255, 255, 0.847) (weiß), da der User-Agent ButtonFace basierend auf dem Farbschema dynamisch aktualisiert. Dasselbe gilt für color des <button>-Elements, für das die entsprechende Systemfarbe ButtonText festgelegt ist.

Demo

Die Auswirkungen von color-scheme auf eine große Anzahl von HTML-Elementen kannst du in einer Demo zu Glitch sehen. In der Demo werden absichtlich die Verstöße der WCAG AA und der WCAG AAA mit den in der Warnung oben angegebenen Linkfarben dargestellt.

Danksagungen

Die CSS-Eigenschaft color-scheme und das entsprechende Meta-Tag wurden von Rune Lillesveen implementiert. Rune ist außerdem Mitbearbeiter der Spezifikation des CSS-Farbanpassungsmoduls – Stufe 1. Hero-Image von Philippe Leone auf Unsplash