Implementing Meta Theme Color modern HTML5 and CSS3 websites.

Apple Safari has started supporting theme-color Meta Tag from the Safari 15 release.

Here is how to Implement a theme-color meta tag in HTML.

You have to copy-paste the theme-color meta tag into a section of your website. It will look something like this:

<meta name="theme-color" content="#ff0000"/>

You can use the following code to implement theme color specific to system light or dark modes.

<meta name="theme-color" content="#ff0000" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#ff0000" media="(prefers-color-scheme: dark)">

Here is some code implemented with HEX value with 3 or 6 digits:

<meta name="theme-color" content="#f00">
<meta name="theme-color" content="#ff0000"/>

Here is the same code implemented with RGB / RGBA. RGBA has an alpha value that you can implement transparency with this code.

<meta name="theme-color" content="rgb(255, 0, 0)">
<meta name="theme-color" content="rgba(255, 0, 0, .9)">

If your browser supports hsl/hsla color value, then you can use the following code:

<meta name="theme-color" content="hsl(0, 50%, 50%)">
<meta name="theme-color" content="hsla(0, 50%, 50%, 1)">

If your browser supports HEX value with 4 or 8 digits, then you can use the following code:

<meta name="theme-color" content="#f000">
<meta name="theme-color" content="#ff000000">

I hope the above information helps you to implement a theme-color meta tag for your website.

Thanks & Regards
Mandar Apte

Published by Mandar Apte

Mandar is a Mumbai-based multi-disciplinary designer with UX/UI, Logo, Symbol, and Brand Identity design expertise. He currently runs his Mudrkashar Linguistic Apple iPhone, iPad, and Mac app business in the heart of Mumbai city.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.