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 ermöglicht es einem Element anzugeben, in welchen Farbschemata es problemlos dargestellt werden kann. Benutzeragenten ändern die folgenden Aspekte des UI-Chromes, um dem verwendeten Farbschema zu entsprechen:
- Die Farbe der Leinwandoberfläche.
- Die Standardfarben von Scrollleisten und anderen Interaktions-UI.
- Die Standardfarben von Formularelementen.
- Die Standardfarben anderer vom Browser bereitgestellter UI, wie z. B. Unterstreichungen für "Rechtschreibprüfung".
Komponentenautoren müssen die prefers-color-scheme Medienfunktion verwenden, um die Farbschemata auf den restlichen Elementen zu unterstützen.
Gängige Entscheidungen für Betriebssystem-Farbschemata 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 Formularelemente, Scrollleisten 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
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 festgelegt hat, wird das Element mit den Standardfarbeinstellungen der Seite gerendert.
light-
Gibt an, dass das Element unter Verwendung des Betriebssystem-Farbschemas light gerendert werden kann.
dark-
Gibt an, dass das Element unter Verwendung des Betriebssystem-Farbschemas dark gerendert werden kann.
only-
Verbietet 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:rootangewendet 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
Präferenzen für das Farbschema angeben
Um die gesamte Seite an die Farbschematainstellungen des Benutzers anzupassen, deklarieren Sie color-scheme auf dem :root Element.
:root {
color-scheme: light dark;
}
Um spezifische Elemente an die Farbschemata des Benutzers anzupassen, 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 jeglichen CSS-Style-Informationen einfügen, um Benutzeragenten über das bevorzugte Farbschema zu informieren und unerwünschte Bildschirmblitze während des Seitenladens zu verhindern.
Stil basierend auf Farbschemata gestalten
Um Elemente basierend auf den Farbschemaeinstellungen zu gestalten, verwenden Sie die prefers-color-scheme Medienabfrage. Das folgende Beispiel stimmt die gesamte Seite darauf ein, sowohl das helle als auch das dunkle Betriebssystemfarbschema über die color-scheme Eigenschaft zu verwenden, und verwendet dann prefers-color-scheme, um die gewünschten Vordergrund- 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 verwenden Sie die light-dark() <color> Funktion, um die Vordergrund- 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-schemeMedienabfrage, um die Benutzerpräferenzen für Farbschemata zu erkennen.light-dark()Farb-Funktion, um Farben für sowohl helle als auch dunkle Farbschemata zu setzen.- 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-imageprint-color-adjust- Verwendung relativer Farben