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 bequem gerendert werden kann. Benutzeragenten ändern die folgenden Aspekte der UI-Chrome, um das verwendete Farbschema anzupassen:
- Die Farbe der Canvas-Fläche.
- Die Standardfarben von Scrollleisten und anderen Interaktions-UI.
- Die Standardfarben von Formularelementen.
- Die Standardfarben anderer browsergestützter UI, wie "Rechtschreibprüfung"-Unterstriche.
Komponentenautoren müssen die prefers-color-scheme
Medienfunktion verwenden, um die Farbschemata für die restlichen Elemente zu unterstützen.
Gängige Optionen für Betriebssystem-Farbschemata sind "hell" und "dunkel" oder "Tagmodus" 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
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 mit den Farbschemaeinstellungen der Seite gerendert werden kann. Wenn die Seite kein Farbschema festgelegt hat, wird das Element mit den Standardeinstellungen der Seite gerendert.
light
-
Zeigt an, dass das Element mit dem hellen Farbschema des Betriebssystems gerendert werden kann.
dark
-
Zeigt an, dass das Element mit dem dunklen Farbschema 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 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
Festlegen von Farbschema-Vorlieben
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;
}
Styling basierend auf Farbschemata
Um Elemente basierend auf Farbschema-Präferenzen zu stylen, verwenden Sie die prefers-color-scheme
Medienabfrage. Das folgende Beispiel stellt die gesamte Seite auf die Verwendung sowohl heller als auch dunkler 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 verwenden Sie die light-dark()
<color>
Funktion, 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
BCD tables only load in the browser
Siehe auch
prefers-color-scheme
Medienabfrage zur Erkennung von Benutzerpräferenzen für Farbschemata.light-dark()
Farb-Funktion zur Festlegung der Farben für sowohl helle als auch dunkle Farbschemata.- 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
- Verwenden von relativen Farben