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 ⁨Januar 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 des UI-Chromes, um das verwendete Farbschema anzupassen:

Die Farbe der Leinwandfläche.
Die Standardfarben von Scrollbalken und anderen Interaktions-UI-Elementen.
Die Standardfarben von Formularelementen.
Die Standardfarben anderer vom Browser bereitgestellter UI-Elemente, wie z.B. "Rechtschreibprüfung"-Unterstreichungen.

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

Übliche Optionen für Betriebssystemfarbschemata 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 Formularelemente, Scrollbalken 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 unter Verwendung der Seiten-Farbschema-Einstellungen gerendert werden kann. Wenn die Seite kein Farbschema festgelegt hat, wird das Element mit den Standardeinstellungen der Seite gerendert.

light

Gibt an, dass das Element unter Verwendung des Betriebssystem-Hell-Farbschemas gerendert werden kann.

dark

Gibt an, dass das Element unter Verwendung des Betriebssystem-Dunkel-Farbschemas gerendert 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 spezifisches Element oder :root angewendet wird.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

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 obigem CSS fügen Sie das <meta name="color-scheme"> HTML <meta>-Tag im <head> ein, vor jeglichen CSS-Stilinformationen, um Benutzeragenten über das bevorzugte Farbschema zu informieren und unerwünschte Bildschirmblitze während des Seitenladens zu verhindern.

Styling basierend auf Farbschemata

Um Elemente basierend auf den Farbschema-Präferenzen zu stylen, verwenden Sie die Mediaprinzip-Abfrage prefers-color-scheme. Das folgende Beispiel bezieht die gesamte Seite in die Verwendung sowohl von hellen als auch dunklen Betriebssystemfarbschemata ü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 anzugeben.

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 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

Mediaprinzip-Abfrage prefers-color-scheme, um Benutzerpräferenzen für Farbschemata zu erkennen.
light-dark() Farb-Funktion, um Farben für sowohl helle als auch dunkle Farbschemata festzulegen.
Andere farbbezogene Eigenschaften: color, accent-color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, und column-rule-color
background-image
print-color-adjust
Verwendung relativer Farben

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden