1. Web
  2. CSS
  3. Reference
  4. Properties
  5. color-scheme

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

color-scheme CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2022 browserübergreifend verfügbar.

Die color-scheme CSS Eigenschaft 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 Leinwandoberfläche.
  • Die Standardfarben der Scrollbalken und anderer Interaktions-UI.
  • Die Standardfarben der Formularelemente.
  • Die Standardfarben anderer vom Browser bereitgestellter UI, wie beispielsweise die Unterstreichungen der "Rechtschreibprüfung".

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

Übliche Auswahlmöglichkeiten für Betriebssystem-Farbschemata sind "light" und "dark" 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, Scrollbalken und die verwendeten Werte von CSS Systemfarben mit 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 mit den Farbschema- Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema setzt, wird das Element mit den Standardfarbeneinstellungen der Seite gerendert.

light

Gibt an, dass das Element mit dem light Farbschema des Betriebssystems gerendert werden kann.

dark

Gibt an, dass das Element mit dem dark Farbschema des Betriebssystems gerendert werden kann.

only

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

Kann verwendet werden, um Farbüberschreibungen, die durch das Auto Dark Theme von Chrome verursacht werden, auszuschalten, 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

Formaler Syntax

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

Beispiele

Farbpräferenzen deklarieren

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

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

Um bestimmte Elemente in die Farbpräferenzen des Benutzers einzubinden, 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>, vor jeglichen CSS-Stilinformationen, einfügen, um Benutzeragenten über das bevorzugte Farbschema zu informieren und unerwünschte Bildschirmblitze während des Seitenladevorgangs zu vermeiden.

Styling basierend auf Farbschemata

Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme Media-Query. Das folgende Beispiel bindet die gesamte Seite für beide, helle und dunkle Betriebssystem-Farbschemata ü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 können Sie die light-dark() <color> Funktion verwenden, 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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden