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

Published on Updated on

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.


  • Does this apply if my site is not launched from the home screen?
  • 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.

Updated on Improve article


Tab Discarding in Chrome - A Memory-Saving Experiment


The larger-than advanced Network Panel filter, and a few others

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.