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.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
theme-colormeta 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.
theme_colorproperty 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 the address bar color of every page of your app according to the manifest's
theme-colorin Chrome 39 for Android