Theming the browser's address bar to match the brand colors of your Progressive Web App (PWA) provides a more immersive user experience.
Browser compatibility #
At the time of writing, theming the browser address bar is supported on Android-based browsers. See Browser compatibility for updates.
How the Lighthouse theme color audit fails #
Lighthouse flags pages that don't apply a theme to the address bar:
The audit fails if Lighthouse doesn't find a
theme-color meta tag in the page's HTML and a
theme_color property in the web app manifest.
Note that Lighthouse doesn't test whether the values are valid CSS color values.
How to set a theme color for the address bar #
Step 1: Add a
theme-color meta tag to every page you want to brand #
theme-color meta tag ensures that the address bar is branded when a user visits your site as a normal webpage. Set the tag's
content attribute to any valid CSS color value:
<meta name="theme-color" content="#317EFB"/>
Learn more about the
theme-color meta tag in Google's Support for
theme-color in Chrome 39 for Android.
Step 2: Add the
theme_color property to your web app manifest #
theme_color property in your web app manifest ensures that the address bar is branded when a user launches your PWA from the home screen. Unlike the
theme-color meta tag, you only need to define this once, in the manifest. Set the property to any valid CSS color value:
The browser will set the address bar color of every page of your app according to the manifest's
- Source code for Does not set a theme color for the address bar audit
- Add a web app manifest
- Support for
theme-colorin Chrome 39 for Android