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.