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 Farbprofilen es komfortabel dargestellt werden kann. Benutzeragenten ändern die folgenden Aspekte der UI-Oberfläche, um dem verwendeten Farbschema zu entsprechen:

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

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

Gängige Auswahlmö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 umfasst Formularelemente, Scrollleisten und die verwendeten Werte von 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 mit den Farbschema Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema gesetzt hat, wird das Element mit den Standardfarbeinstellungen der Seite gerendert.

light

Gibt an, dass das Element mit dem Betriebssystem hellen Farbschema gerendert werden kann.

dark

Gibt an, dass das Element mit dem Betriebssystem dunklen Farbschema gerendert werden kann.

only

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

Kann verwendet werden, um das Überschreiben von Farben durch das automatische Dunkelthema von Chrome zu deaktivieren, indem color-scheme: only light; auf ein spezifisches 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 Farbschema-Präferenzen

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

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

Um spezifische Elemente in die Farbschema-Präferenzen des Benutzers aufzunehmen, 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 sollte auch das <meta name="color-scheme"> HTML <meta> Tag im <head> vor jeglichen CSS-Stilinformationen eingefügt werden, um Benutzeragenten über das bevorzugte Farbschema zu informieren und ungewollte Bildschirmblitze während des Seitenladens zu vermeiden.

Styling basierend auf Farbschemata

Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme Medienabfrage. Das folgende Beispiel wählt die gesamte Seite in die Verwendung sowohl hellerer als auch dunklerer Betriebssystem-Farbschemata mittels der color-scheme Eigenschaft aus und verwendet dann prefers-color-scheme, um die gewünschten Vorder- und Hintergrundfarben für individuelle Elemente in diesen Farbschemata 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 Farbschemata in 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