color-scheme

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2022.

Die color-scheme-Eigenschaft von CSS ermöglicht es einem Element, anzugeben, in welchen Farbschemata es komfortabel gerendert werden kann. Benutzeragenten ändern die folgenden Aspekte der UI-Chrome, um das verwendete Farbschema anzupassen:

  • Die Farbe der Leinwand-Oberfläche.
  • Die Standardfarben von Scrollleisten und anderen Interaktions-UIs.
  • Die Standardfarben von Formularelementen.
  • Die Standardfarben anderer vom Browser bereitgestellter UIs, wie z. B. "Rechtschreibprüfung"-Unterstreichungen.

Komponentenautoren müssen das prefers-color-scheme-Medienmerkmal verwenden, um die Farbschemata bei den restlichen Elementen zu unterstützen.

Übliche Wahlmöglichkeiten für Betriebssystem-Farbschemata sind "hell" und "dunkel" oder "Tagmodus" und "Nachtmodus". Wenn ein Benutzer eines dieser Farbschemata auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dies schließt Formularelemente, Scrollleisten und die verwendeten Werte von CSS-Systemfarben ein.

Probieren Sie es aus

color-scheme: normal;

color-scheme: dark;

color-scheme: light;

<section class="default-example container" id="default-example">
  <textarea id="example-element">Text Area</textarea>
</section>

#example-element {
  width: 80%;
  height: 50%;
}

Syntax

css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

Der Wert der color-scheme-Eigenschaft muss eines der folgenden Schlüsselwörter sein.

Werte

normal

Gibt an, dass das Element unter Verwendung der Farbschema-Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema festgelegt hat, wird das Element mit den Standardfarbeneinstellungen der Seite gerendert.

light

Gibt an, dass das Element unter Verwendung des hellen Farbschemas des Betriebssystems gerendert werden kann.

dark

Gibt an, dass das Element unter Verwendung des dunklen Farbschemas des Betriebssystems gerendert werden kann.

only

Untersagt dem Benutzeragenten, das Farbschema für das Element zu überschreiben.

Kann verwendet werden, um Farbüberschreibungen durch Chromes Auto Dark Theme zu deaktivieren, indem color-scheme: only light; auf ein bestimmtes Element oder :root angewendet wird.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

color-scheme = 
  normal                                       |
  [ light | dark | <custom-ident> ]+ && only?

Beispiele

Farbschema-Präferenzen deklarieren

Um die gesamte Seite in die Farbschema-Präferenzen des Benutzers einzubeziehen, deklarieren Sie color-scheme auf dem :root-Element.

css
:root {
  color-scheme: light dark;
}

Um spezifische Elemente in die Farbschema-Präferenzen des Benutzers einzubeziehen, deklarieren Sie color-scheme auf diesen Elementen.

css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}

Zusätzlich zu dem oben genannten CSS sollten Sie auch das <meta name="color-scheme">-HTML-<meta>-Tag im <head> vor jeglichen CSS-Stilinformationen einfügen, um Benutzeragenten über das bevorzugte Farbschema zu informieren und unerwünschte Bildschrimblitze während des Seitenaufbaus zu verhindern.

Styling basierend auf Farbschemata

Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme-Media-Query. Das folgende Beispiel entscheidet, dass die gesamte Seite sowohl das helle als auch das dunkle Farbschema des Betriebssystems verwendet, und verwendet dann prefers-color-scheme, um die gewünschte Vordergrund- und Hintergrundfarbe für einzelne Elemente in diesen Farbschemata festzulegen.

css
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

Alternativ können Sie die light-dark()-<color>-Funktion verwenden, um die Vordergrund- und Hintergrundfarben für die verschiedenen Farbschemata mit einer kompakteren Code-Struktur festzulegen:

css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

Spezifikationen

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

Browser-Kompatibilität

Siehe auch