<meta name="theme-color">

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Dertheme-color Wert für dasname Attribut des<meta> Elements gibt eine vorgeschlagene Farbe an, die Benutzeragenten verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Wenn angegeben, definieren Sie eine Themenfarbe durch eincontent Attribut im<meta> Element als CSS<color> Wert.

Um beispielsweise anzugeben, dass ein Dokumentcornflowerblue als Themenfarbe verwenden soll, setzen Sie das<meta> wie folgt fest:

html

<meta name="theme-color" content="cornflowerblue" />

Um das Medium festzulegen, auf das sich die Themenfarbe-Metadaten beziehen, fügen Sie dasmedia Attribut mit einer gültigen Medienabfrage-Liste hinzu (siehe dastheme-color Medienabfrage-Beispiel).

Nutzungshinweise

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

content

Ein<meta> Element mitname=theme-color muss eincontent Attribut haben, das die Themenfarbe definiert. Der Wert descontent Attributs ist wie folgt:

<color> Wert: Ein gültiger Farbwert, wie zum Beispiel hexadezimal, RGB, benannte Farbe usw.

mediaOptional

Jeder gültige Medientyp oder Abfrage. Wenn bereitgestellt, werden die imcontent Attribut definierten Optionen für die Themenfarbe des Dokuments dem Browser vorgeschlagen, wenn die Medienabfrage übereinstimmt.

Beispiele

Einen Farbwert festlegen

Betrachten Sie den folgenden Code, der<meta> verwendet, um eine Themenfarbe festzulegen:

html

<meta name="theme-color" content="#4285f4" />

Das folgende Bild zeigt die Wirkung dieser Einstellung in Chrome auf einem Android-Mobilgerät:

Bild, das die Wirkung von theme-color zeigt

Bildnachweis: vonIcons & Browser Colors, erstellt und geteilt von Google und verwendet gemäß den in derCreative Commons 4.0 Attribution License beschriebenen Bedingungen.

Eine Medienabfrage mit`theme-color` verwenden

Sie können einen Medientyp oder eine Abfrage immedia Attribut bereitstellen. Dietheme-color wird dann nur gesetzt, wenn die Medienbedingung wahr ist. Zum Beispiel:

html

<meta  name="theme-color"  content="cornflowerblue"  media="(prefers-color-scheme: light)" /><meta  name="theme-color"  content="dimgray"  media="(prefers-color-scheme: dark)" />