DEV Community

Cover image for The Importance of the Meta Theme Color (HTML Tricks #1)
Nikolay Tsanov
Nikolay Tsanov

Posted on • Updated on • Originally published at ntsanov.com

The Importance of the Meta Theme Color (HTML Tricks #1)

You have probably noticed that on some popular website when visited on mobile, the menu bar in Chrome magically changes its colour to match the primary colour of the page.

The Guardian’s WebsiteThe Guardian’s Website

There is no magic in that. This can easily be achieved by using only one line of code inserted directly into the <head> tag of your page. This will suggest to the browser to use this colour rather than the default one.

<meta name="theme-color" content="#ffffff">
Enter fullscreen mode Exit fullscreen mode

Other popular websites using this:

This one line can go a long way in helping your clients notice you and your website. It simply looks more professional and you appear to have spent more time on your design. Support for this feature has been introduced in version 39 of Chrome for Android on Lollipop.

Top comments (0)