Learn Measure Blog About
Learn Measure Blog About

Does not set a theme color for the address bar

• Updated

Theming the browser's address bar to match the brand colors of your Progressive Web App (PWA) provides a more immersive user experience.

How the Lighthouse theme color audit fails

Lighthouse flags pages that don't apply a theme to the address bar:

Lighthouse audit showing address bar isn't themed to the page's colors

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.

Each PWA audit is weighted equally in the Lighthouse PWA Score, except for three manual audits: Site works cross-browser, Page transitions don't feel like they block on the network, and Each page has a URL. Learn more in the Lighthouse Scoring Guide.

How to set a theme color for the address bar

Step 1: Add a theme-color meta tag to every page you want to brand

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.

Step 2: Add the theme_color property to your web app manifest

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 the address bar color of every page of your app according to the manifest's theme_color.

Resources

Last updated: Improve article