theme-color

Der Wert theme-color für das name-Attribut des <meta>-Elements gibt eine vorgeschlagene Farbe an, die Benutzeragenten verwenden sollten, um die Darstellung der Seite oder der umgebenden Benutzeroberfläche anzupassen. Falls angegeben, muss das content-Attribut eine gültige CSS <color> enthalten.

Beispiel

html
<meta name="theme-color" content="#4285f4" />

Das folgende Bild zeigt den Effekt, den das obenstehende <meta>-Element auf ein in Chrome auf einem Android-Mobilgerät angezeigtes Dokument haben wird.

Bild, das den Effekt 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 Attribution License.

Sie können einen Medientyp oder eine Abfrage im media-Attribut angeben; die Farbe wird dann nur gesetzt, wenn die Medienbedingung wahr ist. Zum Beispiel:

html
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Spezifikationen

Specification
HTML Standard
# meta-theme-color

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch