<meta name="color-scheme"> HTML-Attributwert
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.
Der color-scheme Wert für das name-Attribut des <meta>-Elements gibt ein vorgeschlagenes Farbschema an, das Benutzeragenten für eine Seite verwenden sollten.
Falls angegeben, definieren Sie das Farbschema mithilfe eines content-Attributs im <meta>-Element mit einem gültigen CSS color-scheme-Wert.
Die Themenfarbe funktioniert auf Dokument-Ebene auf die gleiche Weise wie die CSS-Eigenschaft color-scheme, die die bevorzugten und akzeptierten Farbschemata von einzelnen Elementen angibt.
Der Hauptzweck von <meta name="color-scheme"> besteht darin, die Kompatibilität und Reihenfolge der Präferenz für helle und dunkle Farbschemata anzugeben.
Um beispielsweise anzugeben, dass ein Dokument den Dunkelmodus bevorzugt, aber auch den Hellmodus unterstützt:
<meta name="color-scheme" content="dark light" />
Ihre Stile können sich mithilfe der CSS-Medienfunktion prefers-color-scheme an das aktuelle Farbschema anpassen.
Verwendungshinweise
Ein <meta name="color-scheme">-Element hat die folgenden zusätzlichen Attribute:
content-
Ein
<meta>-Element mitname=color-schememuss eincontent-Attribut haben, das das Farbschema als CSScolor-scheme-Wert definiert. Dascontent-Attribut kann einer der folgenden Werte sein:normal-
Das Dokument ist sich der Farbschemata nicht bewusst und sollte mit der Standardfarbpalette gerendert werden.
light,dark,light dark,dark light-
Ein oder mehrere Farbschemata, die vom Dokument unterstützt werden. Mehrere Farbschemata zeigen an, dass das erste Schema vom Dokument bevorzugt wird, aber dass das zweite Schema akzeptabel ist, wenn es der Benutzer bevorzugt. Die mehrfache Angabe des gleichen Farbschemas hat denselben Effekt wie die einmalige Angabe.
only light-
Zeigt an, dass das Dokument nur den Hellmodus unterstützt, mit einem hellen Hintergrund und dunklen Vordergrundfarben.
only darkist ungültig, da das Erzwingen eines Dokuments in den Dunkelmodus, wenn es nicht kompatibel ist, zu unlesbarem Inhalt führen kann und alle gängigen Browser standardmäßig den Hellmodus verwenden, falls nicht anders konfiguriert.
Beispiele
Verwendung eines color-scheme-Schlüsselworts
Das folgende Beispiel gibt dem Browser an, dass die Seite sowohl helle als auch dunkle Themen unterstützt. Ob das helle oder dunkle Farbschema verwendet wird, hängt von Benutzereinstellungen wie den Betriebssystemeinstellungen oder den Browsereinstellungen ab:
<meta name="color-scheme" content="light dark" />
Spezifikationen
| Spezifikation |
|---|
| HTML # meta-color-scheme |
Browser-Kompatibilität
Siehe auch
color-schemeCSS-Eigenschaftprefers-color-schemeMedienabfrage