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 January 2022.

Die color-scheme CSS Eigenschaft ermöglicht es einem Element anzugeben, in welchen Farbpaletten es problemlos gerendert werden kann. Benutzeragenten ändern die folgenden Aspekte des UI-Chromes, um die verwendete Farbpalette widerzuspiegeln:

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

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

Übliche Auswahlmöglichkeiten für Betriebssystem-Farbpaletten sind "light" und "dark" oder "day mode" und "night mode". Wenn ein Benutzer eine dieser Farbpaletten auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dies betrifft Formularsteuerelemente, Scrollleisten und die verwendeten Werte der CSS-Systemfarben.

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 Farbpaletten-Einstellungen der Seite gerendert werden kann. Wenn die Seite keine Farbpalette eingestellt hat, wird das Element unter Verwendung der Standardfarbeinstellungen der Seite gerendert.

light

Gibt an, dass das Element unter Verwendung der light Farbpalette des Betriebssystems gerendert werden kann.

dark

Gibt an, dass das Element unter Verwendung der dark Farbpalette des Betriebssystems gerendert werden kann.

only

Verhindert, dass der Benutzeragent die Farbpalette des Elements überschreibt.

Kann verwendet werden, um Farbüberschreibungen zu deaktivieren, die durch Chromes Auto Dark Theme verursacht werden, indem color-scheme: only light; auf einem bestimmten 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

Deklaration von Farbpaletten-Präferenzen

Um die gesamte Seite in die Farbpaletten-Präferenzen des Benutzers einzuschließen, deklarieren Sie color-scheme auf dem :root-Element.

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

Um spezifische Elemente in die Farbpaletten-Präferenzen des Benutzers einzuschließen, deklarieren Sie color-scheme auf diesen Elementen.

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

Zusammen mit dem obigen CSS sollten Sie auch das <meta name="color-scheme"> HTML <meta>-Tag im <head> einfügen, vor jeglichen CSS-Stilinformationen, um Benutzeragenten über die bevorzugte Farbpalette zu informieren und unerwünschte Bildschirmblitze während des Seitenladens zu vermeiden.

Styling basierend auf Farbpaletten

Um Elemente basierend auf Farbpaletten-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme Medienabfrage. Das folgende Beispiel optiert die gesamte Seite in die Nutzung von sowohl light als auch dark Betriebssystem-Farbpaletten via der color-scheme-Eigenschaft und verwendet dann prefers-color-scheme, um die gewünschten Vorder- und Hintergrundfarben für individuelle Elemente in diesen Farbpaletten zu spezifizieren.

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 die Vorder- und Hintergrundfarben für die verschiedenen Farbpaletten 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