Does not set a theme color for the address bar

— Updated
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: PWA audits
On this page

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 #

At the time of writing, theming the browser address bar is supported on Android-based browsers. 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:

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.

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

Resources #

Last updated: — Improve article
Return to all articles
Share