<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. Wenn angegeben, definieren Sie das Farbschema mit einem content-Attribut im <meta> Element mit einem gültigen CSS color-scheme Wert.
Die Themenfarbe funktioniert auf Dokumentenebene auf die gleiche Weise wie die CSS-Eigenschaft color-scheme, die die bevorzugten und akzeptierten Farbschemata von individuellen Elementen angibt. Der Hauptzweck von <meta name="color-scheme"> ist es, die Kompatibilität und Reihenfolge der Präferenz für helle und dunkle Farbmodes anzugeben. Zum Beispiel, um anzuzeigen, 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 des CSS-Media-Features prefers-color-scheme an das aktuelle Farbschema anpassen.
Anwendungshinweise
Ein <meta name="color-scheme"> Element hat die folgenden zusätzlichen Attribute:
content-
Ein
<meta>Element mitname=color-schememuss eincontentAttribut haben, das das Farbschema als CSScolor-schemeWert definiert. DascontentAttribut kann eines der folgenden sein:normal-
Das Dokument ist sich der Farbschemata nicht bewusst und sollte mit der Standardfarbpalette gerendert werden.
light,dark,light dark,dark light-
Eines oder mehrere vom Dokument unterstützte Farbschemata. Mehrere Farbschemata bedeuten, dass das erste vom Dokument bevorzugt wird, aber das zweite akzeptabel ist, wenn der Benutzer es bevorzugt. Dasselbe Farbschema mehrmals anzugeben hat denselben Effekt, als es einmal anzugeben.
only light-
Gibt an, dass das Dokument nur den Hellmodus unterstützt, mit einem hellen Hintergrund und dunklen Vordergrundfarben.
only darkist ungültig, da das Erzwingen des Renderns eines Dokuments im Dunkelmodus, wenn es nicht kompatibel ist, zu unlesbarem Inhalt führen kann und alle großen Browser standardmäßig auf den Hellmodus einstellen, wenn nicht anders konfiguriert.
mediaOptional-
Jeder gültige Medientyp oder Abfrage. Wenn angegeben, werden die im
contentAttribut definierten Optionen für das Farbschema des Dokuments dem Browser vorgeschlagen, wenn die Medienabfrage zutrifft. Dies ist hauptsächlich nützlich für das CSS-Media-Featureprefers-color-scheme.
Beispiele
Verwendung eines color-scheme Schlüsselworts
Das folgende Beispiel zeigt 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 den Benutzerpräferenzen 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