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
