school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Using the web app manifest to specify a site wide theme colour

Chrome introduced the concept of a theme color for your site in 2014. The theme color is a hint from your web page that tells the browser what color to tint UI elements such as the address bar.

For example, below is this site with and without the theme color applied.


theme color
Theme color

The problem is that you have to define the theme color on every single page and if you have a large site or legacy site then making a lot of site wide changes is not always feasible.

Starting in Chrome 46 (Beta September 2015), adding in a theme_color attribute to your manifest will have the effect of applying the color automatically to every page the user visits on your domain when the site is launched from the home screen.

If you page already has a theme-color meta tag — for example <meta name="theme-color" content="#2196F3"> — then the page level configuration will be used instead of the value in the manifest.

Simply add in the theme_color attribute to your manifest and specify an HTML color.

"theme_color": "#2196F3"

To see this in action, visit Airhorner — the worlds best airhorn and add it to your home screen. Or look at the site's manifest.

FAQ

  • Does this apply if my site is not launched from the home screen?
    Yes.
  • Will it ever apply to my entire site, say when they user is just browsing?
    Unlikely at the moment, to do that it would mean that the browser would have to download the manifest a lot more frequently and currently it is low priority asset. This is intended to be parsed when the user adds the site to the home screen.