Theming the browser's address bar to match your brand's colors provides a more immersive user experience. Lighthouse flags the page when the address bar isn't themed to the page's colors:
How this audit fails
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.
Lighthouse does not test whether the values are valid CSS color values.
Each PWA audit is weighted equally in the Lighthouse PWA Score, with the exception of three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, Each page has a URL. Learn more in The Progressive Web App score.
To ensure that the address bar is always themed to your colors:
- Add a
theme-colormeta tag to the HTML of every page you want to brand.
- Add the
theme_colorproperty to your Web App Manifest.
theme-color meta tag ensures that the address bar is branded when
a user visits your site as a normal webpage. Set
content to any valid CSS
color value. You need to add this meta tag to every page that you want to
<meta name="theme-color" content="#317EFB"/>
Learn more about
Support for theme-color in Chrome 39 for Android.
theme_color property in your Web App Manifest ensures that the address
bar is branded when a user launches your progressive web
app from the homescreen. Unlike the
theme-color meta tag, you only need
to define this once, in the manifest. The browser colors every page of your
app according to the manifest's
theme_color. Set the property to any valid
CSS color value.
See User can be prompted to install the web app for more resources on adding a manifest to your app.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.