Let’s learn how to use the ‘Meta Theme Color’ tag to colourise Apple Safari 15 user interface tailored for the website.

Mandar Apte Apple, Apple iOS, Apple macOS, Art & Design, Tutorials, Web Design

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

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

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

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

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

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

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

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

Here is same code implemented with RGB / RGBA. RGBA has 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

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 Reply