Die Meta-Tag theme-color, erklärt
Eine Zeile HTML, die die Adressleiste in Chrome auf dem Handy und die Titelleiste installierter Apps einfärbt. So setzt du sie richtig ein.
Was sie tatsächlich einfärbt
Die Meta-Tag theme-color sagt dem Browser, welche Farbe er für die Bedienelemente direkt neben deiner Seite verwenden soll. In Chrome auf dem Handy und einigen Android-Browsern sind das die Adressleiste und die Statusleiste. Bei einer installierten PWA sind es die Titelleiste und der umgebende Rahmen. Auf Desktop-Browsern bewirkt sie meist nichts, betrachte sie also als ein Feature für Mobilgeräte und installierte Apps.
Der Wert ist eine einzelne CSS-Farbe. Ein Hex-Wert ist die sichere Wahl. Nimm etwas, das zu deiner Marke passt und dabei weißen oder hellen Text lesbar lässt, denn der Browser zeichnet seine eigenen Symbole und Texte über deine Farbe.
Getrennte Farben für Hell und Dunkel
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>Zwei Tags, jede über eine Media Query eingegrenzt. Der Browser wählt die, die zum aktuellen Modus des Nutzers passt. Lass das media-Attribut weg, wenn du für beide Modi nur eine Farbe willst.
Halte sie mit dem Manifest synchron
Das Web App Manifest hat sein eigenes theme_color-Feld. Dieser Wert ist das Pendant der Meta-Tag für installierte Apps: Er legt die Farbe fest, die verwendet wird, wenn deine Seite vom Startbildschirm aus geöffnet wird. Die Meta-Tag deckt den Browser-Tab ab, das Manifest deckt das installierte Fenster ab.
Setze beide und gib ihnen dieselbe Farbe, sofern du keinen echten Grund dagegen hast. Eine Abweichung bedeutet, dass deine Adressleiste im Browser eine Farbe hat und die Titelleiste nach der Installation eine andere, was wie ein Bug aussieht. Sieh dir Was ist manifest.json und den Leitfaden zum Web App Manifest für die vollständige Feldliste an.
Häufige Fragen
Ändert theme-color mein Favicon?
Nein. theme-color färbt nur den Browser-Rahmen rund um deine Seite. Es hat keinerlei Wirkung auf das Favicon im Tab, das apple-touch-icon oder irgendein Manifest-Icon. Das sind separate Bilddateien.
Warum funktioniert mein theme-color auf dem Desktop nicht?
Die meisten Desktop-Browser ignorieren theme-color. Es ist für Chrome auf dem Handy, einige Android-Browser und installierte PWA-Fenster gedacht. Teste es auf einem Smartphone oder nach der Installation der App, nicht in einem Desktop-Tab.
Sollte theme-color mit dem theme_color des Manifests übereinstimmen?
Ja, in fast jedem Fall. Die Meta-Tag färbt den Browser-Tab und das theme_color des Manifests färbt das Fenster der installierten App. Unterschiedliche Werte lassen die Farbe springen, sobald ein Nutzer deine Seite installiert.