Manually set Safari 15 tab color-theme to my website

Question

Created Jun ’21

Replies 2

Boosts 0

Views 14k

Participants 4

Hello. I was wondering if there is any way to manually set the Safari 15 tab color-theme color to my website. It seems like Safari automatically choose the color but I find out that this selection occurs during the first seconds of website load and, because of that, the color being choosen is not the right one for my website.

Is there any CSS I could add or a metatag that tells safari which color it should pick?

I know this is kinda a wierd request, but I want to provide my visitors the richest experience they could get.

Thank you.

Answered by Cjcorp in 679893022

Hi there.

You can set it manually with the meta tag:

<meta name="theme-color" content="#ecd96f">

You could even set different ones for light and dark theme if your website supports them:

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

If I'm not wrong, Safari chooses the theme color automatically from the background-color property.

Hope that helps 🙂

Boost

Answer 1

Cjcorp OP

Jun ’21

Accepted Answer

Hi there.

You can set it manually with the meta tag:

<meta name="theme-color" content="#ecd96f">

You could even set different ones for light and dark theme if your website supports them:

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

If I'm not wrong, Safari chooses the theme color automatically from the background-color property.

Hope that helps 🙂

9

Answer 2

DereksWebsites OP

Oct ’21

After doing some research and testing, I figured out that web browsers on a Mac computer will not let you use colors that are too similar to the colors of the top-left buttons (red for closing, yellow for minimizing, and green for maximizing). White is also not allowed since it's the color of the text in the top bar.

I will now look for a list of acceptable colors.

0