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 CSS Eigenschaft ermöglicht es einem Element, anzugeben, in welchen Farbschemata es komfortabel dargestellt werden kann. Benutzeragenten ändern die folgenden Aspekte des UI-Chromes, um das verwendete Farbschema anzupassen:

  • Die Farbe der Leinwandoberfläche.
  • Die Standardfarben von Scrollbalken und anderen Interaktionselementen.
  • Die Standardfarben von Formularsteuerelementen.
  • Die Standardfarben anderer vom Browser bereitgestellter UI, wie z.B. "Rechtschreibprüfung"-Unterstreichungen.

Komponentenautoren müssen das prefers-color-scheme Medien-Feature verwenden, um Farbschemata für die übrigen Elemente zu unterstützen.

Gängige Auswahlmöglichkeiten für Farbschemata des Betriebssystems sind "hell" und "dunkel" oder "Tagesmodus" und "Nachtmodus". Wenn ein Benutzer eines dieser Farbschemata auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dies umfasst Formularsteuerungen, Scrollbalken und die verwendeten Werte der CSS-Systemfarben.

Probieren Sie es aus

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 dargestellt werden kann. Wenn die Seite kein Farbschema gesetzt hat, wird das Element mit den Standardfarbeneinstellungen der Seite dargestellt.

light

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

dark

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

only

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

Kann verwendet werden, um Farbüberschreibungen zu deaktivieren, die durch Chromes Auto Dark Theme verursacht werden, 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;
}

Styling basierend auf Farbschemata

Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme Media-Query. Das untenstehende Beispiel optiert die gesamte Seite sowohl für helle als auch dunkle Farbschemata des Betriebssystems über die color-scheme Eigenschaft ein und verwendet dann prefers-color-scheme, um die gewünschten Vorder- und Hintergrundfarben für individuelle 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 verwenden Sie die light-dark() <color> Funktion, um Vorder- 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

BCD tables only load in the browser

Siehe auch