The meta tag <meta name=”theme-color”> allows you to control the color of browser interface elements (such as the address bar), especially on mobile devices – it works in Chromium-based browsers, such as Google Chrome on Android. Place the meta tag in the head section of a web page.
Below is an example for color #202020:
<meta name="theme-color" content="#202020" />
Below is a screenshot:
It’s worth adding to your projects, especially since it’s only one line of code. Unless your site supports light/dark mode, in which case it’s two lines. You can set the color per mode using the media tag:
<meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#cccccc" media="(prefers-color-scheme: light)" />Not directly, but it improves the aesthetics of a mobile site, which can indirectly affect user engagement.
No. Chromium browsers (Chrome, Edge, Opera) offer the best support, especially on Android.
Yes. It’s a small detail that makes a very good impression and increases the consistency of the interface.
Leave a Reply