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
CSS Eigenschaft erlaubt es einem Element, anzugeben, in welchen Farbschemata es bequem gerendert werden kann. Benutzeragenten ändern die folgenden Aspekte der Benutzeroberfläche, um das verwendete Farbschema anzupassen:
- Die Farbe der Leinwandoberfläche.
- Die Standardfarben von Scrollleisten und anderen Interaktions-Bedienelementen.
- Die Standardfarben von Formularsteuerelementen.
- Die Standardfarben anderer vom Browser bereitgestellter Benutzeroberflächen, wie z.B. "Rechtschreibprüfung"-Unterstreichungen.
Komponentenautoren müssen das prefers-color-scheme
Medienfeature verwenden, um die Farbschemata auf den restlichen Elementen zu unterstützen.
Gängige Optionen für Farbschemata des Betriebssystems sind "light" und "dark", oder "Tagesmodus" und "Nachtmodus". Wenn ein Benutzer eines dieser Farbschemata auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dies umfasst 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
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
-
Bedeutet, dass das Element mit den Farbschema Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema festgelegt hat, wird das Element mit den Standardeinstellungen der Seite gerendert.
light
-
Bedeutet, dass das Element unter Verwendung des light Farbschemas des Betriebssystems gerendert werden kann.
dark
-
Bedeutet, dass das Element unter Verwendung des dark Farbschemas des Betriebssystems gerendert werden kann.
only
-
Verhindert, dass der Benutzeragent das Farbschema für das Element überschreibt.
Kann verwendet werden, um Farbüberschreibungen zu deaktivieren, die durch Chromes Auto Dark Theme verursacht werden, indem
color-scheme: only light;
auf ein bestimmtes 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
>Deklarieren von Farbschemavorlieben
Um die gesamte Seite in die Farbschemavorlieben des Benutzers einzubinden, deklarieren Sie color-scheme
im :root
Element.
:root {
color-scheme: light dark;
}
Um bestimmte Elemente in die Farbschemavorlieben des Benutzers einzubinden, deklarieren Sie color-scheme
auf diesen Elementen.
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 jede CSS-Style-Information einfügen, um Benutzeragenten über das bevorzugte Farbschema zu informieren und unerwünschtes Bildschirmflackern während des Seitenaufbaus zu vermeiden.
Styling basierend auf Farbschemavorlieben
Um Elemente basierend auf Farbschemavorlieben zu stylen, verwenden Sie die prefers-color-scheme
Medienabfrage. Das folgende Beispiel bindet die gesamte Seite in die Nutzung von sowohl light als auch dark Farbschemata des Betriebssystems ein über die color-scheme
Eigenschaft und verwendet dann prefers-color-scheme
, um die gewünschten Vorder- und Hintergrundfarben für individuelle Elemente in diesen Farbschemata festzulegen.
: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:
: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
Loading…
Siehe auch
prefers-color-scheme
Medienabfrage, um Benutzerpräferenzen für Farbschemata zu erkennen.light-dark()
Farbfunktion, um Farben sowohl für light als auch für dark 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
- Using relative colors