`<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.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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)" />