Safari 15 Theme Color

Safari 15 adds a theme color for the tab bar. Safari can automatically pick a color based on the content or you can manually set the color with a meta tag.

<meta name="theme-color" content="#1a5d8d">

Safari 15 Tab Bar Color

The Safari team at Apple have long been following a design trend of reducing the emphasis on the browser chrome to “defer to the content”. In Safari 15 that includes a more compact browser tab layout and having the tab bar take its color from the content.

iPad Safari with blue tab bar

By default, Safari attempts to set the color of the tab bar based on the page background or color of any header. For my site this seems to work on the iPhone and the iPad giving me a blue tinted tab and status bar that matches the page header.

iPhone Safari with blue status bar

On the desktop I see the unchanged white tab bar unless I manually set the theme color.

Desktop Safari with white tab bar

Setting The Theme Color

You can manually set the tab bar color if you don’t like the choice Safari is making. Add a meta tag in the HTML head with the name “theme-color” and the color you want to use in the content:

  <meta name="theme-color" content="#1a5d8d">

If you want a different color for light and dark color schemes use media queries:

  <meta name="theme-color" content="#1a5d8d"
   media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#06568F"
   media="(prefers-color-scheme: dark)">

Safari ignores colors that would hide the red, yellow and green window control buttons:

Red, yellow, green window control buttons with white background

How Do I Turn It Off?

If you don’t like the tab bar tinting you can turn it off in the Safari preferences. On the desktop and the iPad it’s called “Show color in tab bar”:

Show color in tab bar

On the iPhone, it’s called “Allow Website Tinting”:

Allow Website Tinting

I’m undecided if I like the effect. So far I’ve disabled it on the desktop but left it enabled on the iPad and iPhone.

Learn More