Does not set a theme color for the address bar
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
As of December 2022, theming the browser address bar is supported on Android-based browsers, Google Chrome, and Microsoft Edge. 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.
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).
How to set a theme color for the address bar
theme-color
meta tag to every page you want to brand
Step 1: Add a The 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:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Learn more about the theme-color
meta tag in Google's Support for theme-color
in Chrome 39 for Android.
theme_color
property to your web app manifest
Step 2: Add the The 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:
{
"theme_color": "#317EFB"
…
}
The browser will set the address bar color of every page of your app according to the manifest's theme_color
.