CSS/Eigenschaften/color-scheme
Übliche Farbschemata für Betriebssysteme sind "light" und "dark" oder "Tagmodus" und "Nachtmodus". Wenn ein Benutzer eines dieser Farbschemata auswählt, nimmt das Betriebssystem Anpassungen an der Benutzeroberfläche vor. Dazu gehören Formularsteuerungen, Bildlaufleisten und die verwendeten Werte der CSS-Systemfarben. Die Browser beachten das gesetzte Farbschema automatisch für canvas, Scrollbalken, Formelemente und weitere vom Browser gelieferte Oberflächenelemente, wie z.B. die Unterstreichungen der Rechtschreibprüfung. Für eigene Elemente müssen Sie entweder die light-dark()-Funktion oder die prefers-color-scheme-Medienabfrage verwenden, um die Darstellung an das Farbschema anzupassen.
- Erlaubte Werte
-
normal
: Zeigt an, dass das Element keine Farbschemata kennt und daher mit dem Standard-Farbschema des Browsers gerendert werden sollte. -
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. -
light dark
: Zeigt an, dass das Element das helle und dunkle Farbschema unterstützt. -
only
: Durch die Angabe vononly light
oderonly dark
wird angezeigt, dass das Element ausschließlich mit heller oder dunkler Farbpalette darstellbar ist. Beispielsweise lässt sich damit der Auto Dark Modus mancher Browser unterdrücken.
-
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
normal
- anwendbar auf
alle Elemente
- Vererbung
ja
- animierbar
ja
:root {
color-scheme: light dark;
}
Siehe auch
Weblinks
- Spezifikation (W3C): CSS Color Adjustment Module Level 1 # color-scheme-prop
- Details: caniuse.com