<meta name="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 Januar 2022.
Der color-scheme-Wert für das name-Attribut des <meta>-Elements gibt ein vorgeschlagenes Farbschema an, das von Benutzeragenten für eine Seite verwendet werden sollte. 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 Dokumentebene auf dieselbe Weise, wie die CSS-color-scheme-Eigenschaft die bevorzugten und akzeptierten Farbschemata von individuellen Elementen festlegt. Der Hauptzweck von <meta name="color-scheme"> besteht darin, die Kompatibilität und Reihenfolge der Präferenz für helle und dunkle Farbmodi anzugeben. Zum Beispiel, um 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 an das aktuelle Farbschema mit dem prefers-color-scheme CSS-Media-Feature anpassen.
Anmerkungen zur Verwendung
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 CSS-color-scheme-Wert definiert. Dascontent-Attribut kann einer der folgenden sein:normal-
Das Dokument ist sich Farbpaletten 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 zeigen an, dass das erste Schema vom Dokument bevorzugt wird, aber das zweite akzeptabel ist, wenn der Benutzer es bevorzugt. Eine wiederholte Angabe desselben Farbschemas hat denselben Effekt wie dessen einmalige Angabe.
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 eines Dokumentes zur Darstellung im Dunkelmodus, wenn es nicht kompatibel ist, zu unlesbarem Inhalt führen kann und alle großen Browser standardmäßig auf den Hellmodus eingestellt sind, wenn nichts anderes konfiguriert ist.
mediaOptional-
Jeder gültige Medientyp oder -abfrage. Wenn angegeben, werden die im
content-Attribut definierten Optionen für das Farbschema des Dokuments dem Browser vorgeschlagen, wenn die Medienabfrage zutrifft. Dies ist vor allem für dasprefers-color-schemeCSS-Media-Feature nützlich.
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 das dunkle Farbschema verwendet wird, hängt von Benutzereinstellungen wie Betriebssystemeinstellungen oder den Browsereinstellungen ab:
<meta name="color-scheme" content="light dark" />
Spezifikationen
| Specification |
|---|
| HTML # meta-color-scheme |
Browser-Kompatibilität
Siehe auch
color-schemeCSS-Eigenschaftprefers-color-schemeMedienabfrage