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 problemlos dargestellt werden kann. Benutzeragenten ändern die folgenden Aspekte des UI-Chromes, um das verwendete Farbschema anzupassen:
- Die Farbe der Leinwandoberfläche.
- Die Standardfarben der Bildlaufleisten und anderer Interaktions-UI.
- Die Standardfarben von Formularelementen.
- Die Standardfarben anderer browserbereitgestellter UI, wie beispielsweise Unterstreichungen bei der „Rechtschreibprüfung“.
Komponentenautoren müssen das prefers-color-scheme
Medien-Feature verwenden, um die Farbschemata bei den restlichen Elementen zu unterstützen.
Häufige Optionen 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, Bildlaufleisten und die verwendeten Werte der CSS-Systemfarben mit ein.
Probieren Sie es aus
Syntax
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 festgelegt hat, wird das Element mit den Standardfarbeneinstellungen der Seite dargestellt.
light
-
Gibt an, dass das Element unter Verwendung des light Farbschemas des Betriebssystems dargestellt werden kann.
dark
-
Gibt an, dass das Element unter Verwendung des dark Farbschemas des Betriebssystems dargestellt werden kann.
only
-
Verhindert, dass der Benutzeragent das Farbschema für das Element überschreibt.
Kann verwendet werden, um Farbüberlagerungen, die durch Chromes Auto Dark Theme verursacht werden, zu deaktivieren, indem
color-scheme: only light;
auf ein spezifisches Element oder:root
angewendet wird.
Formale Definition
Initialer Wert | normal |
---|---|
Anwendbar auf | all elements and text |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Deklaration von Farbschema-Präferenzen
Um die gesamte Seite auf die Farbschema-Präferenzen des Benutzers einzustellen, deklarieren Sie color-scheme
auf dem :root
Element.
:root {
color-scheme: light dark;
}
Um spezifische Elemente auf die Farbschema-Präferenzen des Benutzers einzustellen, deklarieren Sie color-scheme
auf diesen Elementen.
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
Medienabfrage. Das untenstehende Beispiel richtet die gesamte Seite darauf aus, sowohl helle als auch dunkle Betriebssystem-Farbschemata über die color-scheme
Eigenschaft zu verwenden, und verwendet dann prefers-color-scheme
, um die gewünschten Vorder- und Hintergrundfarben für individuelle Elemente in diesen Farbschemata zu spezifizieren.
: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 kann die experimentelle light-dark()
<color>
Funktion verwendet werden, um die Vorder- und Hintergrundfarben für die unterschiedlichen Farbschemata mit einer kompakteren Code-Struktur festzulegen:
: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
prefers-color-scheme
Medienabfrage zur Erkennung der Farbschema-Präferenzen der Benutzer.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
, undcolumn-rule-color
background-image
print-color-adjust
- Verwendung relativer Farben