<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 Wert color-scheme 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 Themenerstellfarbe funktioniert auf der Dokumentebene auf die gleiche Weise wie die CSS-color-scheme-Eigenschaft die bevorzugten und akzeptierten Farbschemata einzelner Elemente angibt. Der Hauptzweck von <meta name="color-scheme"> besteht darin, die Kompatibilität und die Reihenfolge der Präferenzen für helle und dunkle Farbmodi anzugeben. Zum Beispiel, um anzuzeigen, dass ein Dokument den Dunkelmodus bevorzugt, jedoch auch den Hellmodus unterstützt:
<meta name="color-scheme" content="dark light" />
Ihre Styles können sich mit dem CSS-Medienmerkmal 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 CSS-color-scheme-Wert definiert. Dascontent-Attribut 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 geben an, dass das erste Schema vom Dokument bevorzugt wird, das zweite jedoch akzeptabel ist, wenn es der Benutzer bevorzugt. Die Angabe desselben Farbschemas mehrmals hat den gleichen Effekt wie die Angabe einmal.
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 der Darstellung 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 eingestellt sind, wenn keine andere Konfiguration vorgenommen wird.
mediaOptional-
Jeder gültige Medientyp oder jede gültige Medienabfrage. Wenn angegeben, werden die im
content-Attribut definierten Optionen des Dokuments für das Farbschema dem Browser vorgeschlagen, wenn die Medienabfrage zutrifft. Dies ist hauptsächlich nützlich für dasprefers-color-schemeCSS-Medienmerkmal.
Beispiele
Verwendung eines color-scheme Schlüssels
Das folgende Beispiel informiert den Browser darüber, dass die Seite sowohl helle als auch dunkle Themen unterstützt. Ob das helle oder dunkle Farbschema verwendet wird, hängt von den 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