theme-color: Die Browser-UI um deine Seite einfärben
theme-color ist ein Meta-Tag, das dem Browser sagt, welche Farbe er für seine eigene UI um deine Seite verwenden soll: den Bereich der Adressleiste in Chrome unter Android, die Fenster-Chrome einer installierten PWA und den oberen Rand des Fensters in neuerem Safari. Du setzt es mit einem Meta-Tag namens theme-color und einem Farbwert, und du kannst zwei davon mit einem media-Attribut deklarieren, sodass es Light und Dark Mode folgt. Ein Web-App-Manifest trägt denselben Wert im theme_color-Feld für die installierte App.
Was es verändert
theme-color beeinflusst nichts innerhalb deiner Seite. Es beeinflusst die eigene Oberfläche des Browsers rundherum, sodass die Grenze zwischen App und Browser aufhört, eine sichtbare Naht zu sein. Auf einem Smartphone wirkt eine dunkle Website unter einer weißen Adressleiste wie zwei getrennte Dinge; sie anzugleichen wirkt wie eines.
Es ist ein Hinweis, keine Garantie. Browser wenden es dort an, wo sie eine Oberfläche zum Einfärben haben, und ignorieren es sonst, und manche verweigern Werte mit zu wenig Kontrast zu ihrem eigenen Text. Nichts bricht, wenn es ignoriert wird.
Light- und Dark-Varianten
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">Der Browser nimmt das erste Tag, dessen Media-Query passt. Ein einzelnes Tag ohne media-Attribut gilt in jedem Schema.
Wo es greift
| Oberfläche | Effekt |
|---|---|
| Chrome unter Android | Färbt den Bereich von Adress- und Statusleiste ein |
| Installierte PWA | Färbt die Titel- oder Statusleiste der App ein |
| Safari (aktuelle Versionen) | Färbt den oberen Fensterrand unter macOS und iOS ein |
| Chrome-Tabs am Desktop | Keine Wirkung in einem normalen Browserfenster |
FAQ zu theme-color
Hängt theme-color mit dem Favicon zusammen?
Nur insofern, als sie zusammen ausgeliefert werden und übereinstimmen sollten. Das Favicon kennzeichnet die Website in einem Tab; theme-color färbt die Browser-UI um die Seite ein. Generatoren geben beide aus, weil sie aus derselben Markenpalette stammen.
Welche Farbwertformate sind erlaubt?
Jede CSS-Farbe, die der Browser parsen kann: Hex, rgb(), hsl(), eine benannte Farbe. Hex ist die sicherste Wahl, weil es über Parser hinweg eindeutig ist.
Warum wird meine theme-color ignoriert?
Häufige Ursachen sind ein media-Attribut, das nie zum aktuellen Schema passt, ein Tag, das nach dem ersten Paint eingefügt wird, oder ein Desktop-Browser, der schlicht keine Oberfläche zum Einfärben hat. Prüfe es zuerst in Chrome für Android, denn dort ist der Effekt am sichtbarsten.