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

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

html

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

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

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

media Optional

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

Beispiele

Einen Farbwert festlegen

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

Eine Medienabfrage mit `theme-color` verwenden

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