<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:
<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 mitname=theme-color
muss eincontent
Attribut haben, das die Thema-Farbe definiert. Der Wert descontent
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:
<meta name="theme-color" content="#4285f4" />
Das folgende Bild zeigt die Wirkung dieser Einstellung in Chrome auf einem Android-Mobilgerät:
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:
<meta
name="theme-color"
content="cornflowerblue"
media="(prefers-color-scheme: light)" />
<meta
name="theme-color"
content="dimgray"
media="(prefers-color-scheme: dark)" />
Spezifikationen
Specification |
---|
HTML # meta-theme-color |
Browser-Kompatibilität
Siehe auch
<meta>
name
Attributcolor-scheme
Wertcolor-scheme
CSS Eigenschaftprefers-color-scheme
Medienabfrage