How to Change the Theme Color of the Address Bar in Mobile Browsers

html
Published on October 24, 2019

Use-Cases of this Tutorial

  • Know how to change the theme color of the address bar in mobile browsers (Chrome & Opera).
  • Know about "theme-color" meta tag.

The theme color of the address bar in mobile browsers can be changed using the theme-color meta tag.

By changing the color of the browser address bar to that of the theme color of a website enriches the user experience. It might appear as a native app to the user rather than a website.

To change the theme color in mobile browsers, the theme-color meta tag is used. However note that this meta tag is currently supported only in Chrome and Opera in Android systems.

<meta name="theme-color" content="#673AB6" >

Any valid CSS color color can be provided in the content attribute to change the theme color of the browser.

Effect of theme-color Meta Tag

As an example look at the below screenshot to see our website without the theme-color meta tag applied :

The same website in Android Chrome after the meta tag is added (we have matched the theme color with the header's background color) :

theme-color Meta Tag in Desktop Browsers

As for desktop browsers, it is only possible to change the brower color theme for desktop Chrome using the theme-color meta tag — only when the website is a desktop Progressive Web Application (PWA).

Know the current support for theme-color meta tag at Can I Use.

In this Tutorial