<meta name="theme-color">

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Dertheme-color Wert für dasname 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 einemcontent Attribut im<meta> Element als CSS<color> Wert.

Zum Beispiel, um anzugeben, dass ein Dokumentcornflowerblue 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 dasmedia Attribut mit einer gültigen Medienabfrageliste hinzu (siehe das Beispiel fürtheme-color mit einer Media Query).

Nutzungshinweise

Ein<meta name="theme-color"> Element hat die folgenden zusätzlichen Attribute:

content

Ein<meta> Element mitname=theme-color muss eincontent Attribut haben, das die Themenfarbe definiert.Der Wert descontent Attributs ist wie folgt:

<color> Wert: Ein gültiger Farbwert, wie zum Beispiel hexadezimal, RGB, benannte Farbe, etc.

mediaOptional

Jeder gültige Medientyp oder Abfrage.Falls angegeben, werden die imcontent 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: vonIcons & Browser Colors, erstellt und geteilt von Google und verwendet gemäß den Bedingungen derCreative Commons 4.0 Lizenz für Namensnennung.

Verwendung einer Media Query mit`theme-color`

Sie können einen Medientyp oder eine Abfrage immedia Attribut angeben.Dietheme-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)" />