<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 empfohlene Farbe an, die von Benutzeragenten verwendet werden sollte, um die Anzeige der Seite oder der umliegenden Benutzeroberfläche anzupassen. Falls angegeben, definieren Sie eine Themenfarbe mit einem content Attribut im <meta> Element als CSS <color> Wert.

Zum Beispiel, um anzugeben, dass ein Dokument cornflowerblue als Themenfarbe verwenden soll, setzen Sie das <meta> wie folgt:

html

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

Um das Medium festzulegen, auf das die Metadaten der Themenfarbe angewendet werden sollen, fügen Sie das media Attribut mit einer gültigen Medienabfrageliste hinzu (siehe das Beispiel für theme-color mit einer Media Query).

Nutzungshinweise

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, etc.

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 empfohlen, wenn die Medienabfrage zutrifft.

Beispiele

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

Bildnachweis: von Icons & Browser Colors, erstellt und geteilt von Google und verwendet gemäß den Bedingungen der Creative Commons 4.0 Lizenz für Namensnennung.

Verwendung einer Media Query 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)" />