Der Wertcolor-scheme für dasname-Attribut des<meta>-Elements gibt ein vorgeschlagenes Farbschema an, das Benutzeragenten für eine Seite verwenden sollten. Wenn angegeben, definieren Sie das Farbschema mit einemcontent-Attribut im<meta>-Element mit einem gültigen CSScolor-scheme-Wert.

Die Themenerstellfarbe funktioniert auf derDokumentebene 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-Medienmerkmalprefers-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-scheme muss 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 Dokumentnur 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 imcontent-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-scheme CSS-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

Browser-Kompatibilität

Siehe auch

• color-scheme CSS-Eigenschaft
• prefers-color-scheme Medienabfrage