DEV Community

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

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

3 2

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay