Address Bar Matches Brand Colors

Overview

Theming the browser's address bar to match your brand's colors provides a more immersive user experience.

Recommendations

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

  1. Add a theme-color meta tag to the HTML of every page you want to brand.
  2. 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.

<head>
  <meta name="theme-color" content="#317EFB"/>
  ...

See Support for theme-color in Chrome 39 for Android to learn more about theme-color.

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.

{
  "theme_color": "#317EFB"
  ...
}

See Manifest Exists for more resources on adding a manifest to your app.

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