Meta tag not working to change address bar color's of safari desktop in dark mode

36 Views Asked by At

I want to change the color of my site's top bar address on Safari desktop. I firstly try to use CSS, but I quickly find the HTML meta tag "theme-color" with the media query "(prefers-color-scheme: light or black)" solution.

Here are the two lines of code I use:

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

This solution is working perfectly great except for that color code (#dc891c the one I want :/) in dark mode.

It worked with all the others hex code I tried in both light and dark mode but my color won't display in dark mode.

I'm working with the Next framework using typescript, react and tailwind.

0

There are 0 best solutions below