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 Farbschemata es komfortabel angezeigt werden kann. Benutzeragenten ändern die folgenden Aspekte der UI-Chrome, um das verwendete Farbschema anzupassen:
- Die Farbe der Leinwandoberfläche.
- Die Standardfarben von Scrollleisten und anderen Interaktions-UI.
- Die Standardfarben von Formularelementen.
- Die Standardfarben anderer browsergestützter UIs, wie z. B. "Rechtschreibprüfung"-Unterstreichungen.
Komponentenautoren müssen das prefers-color-scheme
Media-Feature nutzen, um die Farbschemata auf den restlichen Elementen zu unterstützen.
Übliche Betriebssystem-Farbschemata 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 schließt Formularelemente, Scrollleisten und die verwendeten Werte von CSS-Systemfarben 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
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
-
Zeigt an, dass das Element unter Verwendung der Farbschema-Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema eingestellt hat, wird das Element unter Verwendung der Standardfarbeneinstellungen der Seite gerendert.
light
-
Zeigt an, dass das Element unter Verwendung des Betriebssystem hell Farbschemas gerendert werden kann.
dark
-
Zeigt an, dass das Element unter Verwendung des Betriebssystem dunkel Farbschemas 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 Automatisches Dunkles 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
Beispiele
Präferenzen für Farbschemata deklarieren
Um die gesamte Seite in die Farbschemata-Präferenzen des Benutzers einzubinden, deklarieren Sie color-scheme
im :root
-Element.
:root {
color-scheme: light dark;
}
Um spezifische Elemente in die Farbschema-Präferenzen 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;
}
Neben dem obigen CSS sollten Sie auch das <meta name="color-scheme">
HTML <meta>
Tag im <head>
, vor jeglicher CSS-Style-Information, einfügen, 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 Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme
Media-Query. Das folgende Beispiel bindet die gesamte Seite sowohl in helle als auch in dunkle Betriebssystem-Farbschemata über die color-scheme
-Eigenschaft ein und verwendet dann prefers-color-scheme
, um die gewünschten Vorder- und Hintergrundfarben für einzelne 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
Siehe auch
prefers-color-scheme
Media-Query, um Benutzerpräferenzen für Farbschemata zu erkennen.light-dark()
Farbfunktion, um Farben für sowohl helle als auch dunkle Farbschemata festzulegen.- Weitere 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