\<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 January 2022.

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 Farbauswahl funktioniert auf Dokument-Ebene auf die gleiche Weise wie die CSS-Eigenschaft color-scheme, die die bevorzugten und akzeptierten Farbschemata einzelner Elemente angibt. Der Hauptzweck von <meta name="color-scheme"> besteht darin, die Kompatibilität und die Präferenzreihenfolge für helle und dunkle Farbmodi anzugeben. Zum Beispiel, um anzugeben, dass ein Dokument den Dunkelmodus bevorzugt, aber auch den Hellmodus unterstützt:

html
<meta name="color-scheme" content="dark light" />

Ihre Stile können sich an das aktuelle Farbschema anpassen, indem Sie das CSS-Media-Feature prefers-color-scheme verwenden.

Nutzungshinweise

Ein <meta name="color-scheme"> Element hat die folgenden zusätzlichen Attribute:

content

Ein <meta>-Element mit name=color-scheme muss ein content-Attribut haben, das das Farbschema als CSS color-scheme-Wert definiert. Das content-Attribut kann eines der folgenden sein:

normal

Das Dokument ist nicht auf Farbschemata ausgerichtet und sollte mit der Standard-Farbpalette gerendert werden.

light, dark, light dark, dark light

Eines oder mehrere Farbschemata, die vom Dokument unterstützt werden. Mehrere Farbschemata bedeuten, dass das erste Schema vom Dokument bevorzugt wird, das zweite aber akzeptabel ist, wenn der Benutzer es bevorzugt. Dasselbe Farbschema mehrfach 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 dark ist ungültig, da das Erzwingen 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 zurückgreifen, wenn nicht anders konfiguriert.

media Optional

Jeder gültige Medientyp oder jede Medientypabfrage. Falls angegeben, werden die im content-Attribut 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-Feature prefers-color-scheme.

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 das dunkle Farbschema verwendet wird, hängt von den Benutzereinstellungen wie Betriebssystemeinstellungen oder den Browsereinstellungen ab:

html
<meta name="color-scheme" content="light dark" />

Spezifikationen

Specification
HTML
# meta-color-scheme

Browser-Kompatibilität

Siehe auch