Address Bar Matches Brand Colors

Overview

Recommendations

To ensure that the address bar is always themed to your colors:

Add a theme-color meta tag to the HTML of every page you want to brand.

Add the theme_color property to your Web App Manifest.

The 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
brand.

The 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.

More information

The audit passes if Lighthouse finds 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.

Feedback

Was this page helpful?

Great! Thank you for the feedback.
Sorry to hear that. Please open an
issue and tell us how we can improve.