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