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 erlaubt einem Element anzugeben, in welchen Farbschemata es problemlos gerendert werden kann. Benutzeragenten ändern die folgenden Aspekte des UI-Chromes, 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 vom Browser bereitgestellter UI, wie zum Beispiel "Rechtschreibprüfung" Unterstreichungen.
Komponentenautoren müssen das Medienmerkmal 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 "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;
Werte
Diese Eigenschaft wird als eines der folgenden Schlüsselwort-Werte angegeben:
normal-
Zeigt an, dass das Element mit den Farbschema-Einstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema hat, wird das Element mit den Standardeinstellungen der Seite gerendert.
light-
Zeigt an, dass das Element mit dem light-Farbschema des Betriebssystems gerendert werden kann.
dark-
Zeigt an, dass das Element mit dem dark-Farbschema des Betriebssystems gerendert werden kann.
only-
Verbietet dem Benutzeragenten, das Farbschema für das Element zu überschreiben.
Kann verwendet werden, um Farbüberschreibungen, die durch Chromes Auto Dark Theme verursacht werden, zu deaktivieren, indem
color-scheme: only light;auf ein bestimmtes 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
Farbschema-Präferenzen deklarieren
Um die gesamte Seite in die Farbschema-Präferenzen des Benutzers einzubeziehen, deklarieren Sie color-scheme auf dem :root-Element.
:root {
color-scheme: light dark;
}
Um spezifische Elemente in die Farbschema-Präferenzen des Benutzers einzubeziehen, deklarieren Sie color-scheme auf diesen Elementen.
header {
color-scheme: only light;
}
main {
color-scheme: light dark;
}
footer {
color-scheme: only dark;
}
Zusätzlich zu dem oben genannten 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 um unerwünschte Bildschirmblitze während des Seitenladevorgangs zu verhindern.
Styling basierend auf Farbschemata
Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme Medienabfrage. Das folgende Beispiel optiert die gesamte Seite in die Verwendung von sowohl hellen als auch dunklen Betriebssystem-Farbschemata mit der color-scheme-Eigenschaft ein 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 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
| Spezifikation |
|---|
| CSS Color Adjustment Module Level 1 # color-scheme-prop |
Browser-Kompatibilität
Siehe auch
prefers-color-schemeMedienabfrage, um Benutzerpräferenzen für Farbschemata zu erkennen.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-imageprint-color-adjust- Verwenden relativer Farben