`<meta name="theme-color">` HTML-Attributwert

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Der theme-color-Wert für das name-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 mithilfe eines content-Attributs im <meta>-Element als CSS <color>-Wert.

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

html

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

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

Anwendungshinweise

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 z.B. Hexadezimal, RGB, benannter Farbe usw.

media Optional

Jeder gültige Medientyp oder Abfrage. Falls angegeben, werden die im content-Attribut definierten Optionen für die Themenfarbe des Dokuments dem Browser vorgeschlagen, sobald 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 Auswirkung dieser Einstellung in Chrome auf einem Android-Mobilgerät:

Bild, das die Wirkung der Verwendung von theme-color zeigt

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

Verwendung einer Medienabfrage mit `theme-color`

Sie können einen Medientyp oder eine Abfrage im media-Attribut angeben. Die theme-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)" />