<meta name="theme-color">

Limited availability

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

Der theme-color Wert für das name-Attribut des <meta>-Elements gibt eine vorgeschlagene Farbe an, die von Benutzeragenten verwendet werden sollte, um die Anzeige der Seite oder die umgebende Benutzeroberfläche anzupassen. Wenn angegeben, definieren Sie eine Themenfarbe mithilfe eines content-Attributs im <meta>-Element als CSS <color> Wert.

Um beispielsweise anzugeben, dass ein Dokument cornflowerblue als Themenfarbe verwenden sollte, setzen Sie das <meta> wie folgt:

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

Um die Medien festzulegen, auf die sich die Metadaten der Themenfarbe beziehen, fügen Sie das media-Attribut mit einer gültigen Medienabfrage-Liste ein (siehe das theme-color Medienabfrage-Beispiel).

Nutzungsnotizen

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

content

Ein <meta>-Element mit name=theme-color muss ein content-Attribut haben, das die Themenfarbe definiert. Der Wert des content-Attributs ist wie folgt:

<color> Wert

Ein gültiger Farbwert, wie zum Beispiel hexadezimal, RGB, benannte Farbe usw.

media Optional

Jeder gültige Medientyp oder jede gültige Abfrage. Wenn angegeben, werden die im content-Attribut definierten Optionen für die Themenfarbe des Dokuments dem Browser vorgeschlagen, wenn die Medienabfrage zutrifft.

Beispiele

Setzen eines Farbwerts

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 zeigt die Wirkung der Verwendung von theme-color

Bildnachweis: von Icons & Browser Colors, erstellt und geteilt von Google und verwendet gemäß den Bedingungen der Creative Commons 4.0 Namensnennungslizenz.

Verwendung einer Medienabfrage mit theme-color

Sie können einen Medientyp oder eine Abfrage innerhalb des media-Attributs angeben. Die theme-color wird dann nur gesetzt, wenn die Medienbedingung zutrifft. 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)" />

Spezifikationen

Specification
HTML
# meta-theme-color

Browser-Kompatibilität

Siehe auch