<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 des name Attributs des <meta> Elements zeigt eine vorgeschlagene Farbe an, die Benutzeragenten verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Wenn angegeben, definieren Sie eine Thema-Farbe durch ein content Attribut im <meta> Element als CSS <color> Wert.

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

html

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

Um das Medium festzulegen, auf das sich die Thema-Farbmetadaten beziehen, fügen Sie das media Attribut mit einer gültigen Medienabfragenliste hinzu (siehe das theme-color Medienabfrage-Beispiel).

Verwendungshinweise

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 Thema-Farbe definiert. Der Wert des content Attributs ist wie folgt:

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

media Optional

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

Beispiele

Einstellung eines Farbwertes

Betrachten Sie den folgenden Code, der <meta> verwendet, um eine Thema-Farbe 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

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