theme-color: Tinting Browser UI Around Your Page
theme-color is a meta tag that tells the browser what colour to paint its own UI around your page — the address bar area in Chrome on Android, the window chrome of an installed PWA, and the top of the window in recent Safari. You set it with a meta tag named theme-color and a colour value, and you can declare two of them with a media attribute so it tracks light and dark mode. A web app manifest carries the same value in its theme_color field for the installed app.
What it changes
theme-color does not affect anything inside your page. It affects the browser's own surface around it, so the boundary between the app and the browser stops being a visible seam. On a phone, a dark site under a white address bar reads as two separate things; matching them reads as one.
It is a hint, not a guarantee. Browsers apply it where they have a surface to tint and ignore it elsewhere, and some will refuse values with too little contrast against their own text. Nothing breaks when it is ignored.
Light and dark variants
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">The browser picks the first tag whose media query matches. A single tag with no media attribute applies in every scheme.
Where it applies
| Surface | Effect |
|---|---|
| Chrome on Android | Tints the address bar and status bar area |
| Installed PWA | Tints the app's title bar or status bar |
| Safari (recent versions) | Tints the top of the window on macOS and iOS |
| Desktop Chrome tabs | No effect on a normal browser window |
theme-color FAQ
Is theme-color related to the favicon?
Only in that they ship together and should agree. The favicon identifies the site in a tab; theme-color tints the browser UI around the page. Generators emit both because they come from the same brand palette.
Which colour value formats are allowed?
Any CSS colour the browser can parse — hex, rgb(), hsl(), a named colour. Hex is the safest choice because it is unambiguous across parsers.
Why is my theme-color being ignored?
Common causes are a media attribute that never matches the current scheme, a tag injected after first paint, or a desktop browser that simply has no surface to tint. Check it on Chrome for Android first, since that is where the effect is most visible.