How to Turn Off Tab Bar Colors in Safari for Mac
The latest versions of Safari on Mac apply a color tint effect to the tab toolbar. This shifts the browser window towards the color of the webpage in view, giving it a sort of transparent look. The color effect applies to the area of the search / URL bar, back/forward buttons, tabs, bookmark buttons, and the entire general top of a Safari window on a Mac.
Sometimes the Safari tab bar coloring can be extremely garish or just distracting, but if you’re not a fan of the appearance, you can disable the Safari tab color effect easily in Safari for Mac.
How to Disable Color Effect in Tab Bar on Safari for Mac
This feature only exists in Safari 15 and later, here’s how you can turn it off:
- Open Safari on the Mac if you haven’t done so already, then pull down the “Safari” menu and choose “Preferences”
- Choose “Tabs”
- Uncheck the box for “Show color in tab bar”
The transparent/color tab bar effect will immediately turn off, and Safari will look more like it did in prior versions, before the color tinting feature was standard.
Note this color feature is Safari specific, and though it mimics similar appearance to the general system-wide transparency effects on the Mac, it’s actually a separate setting.
If for whatever reason you want to turn the color tab bar / toolbar effect back on, you can simply repeat the steps above and toggle the box for “Show color in tab bar” on again.
This obviously applies to modern versions of Safari on the Mac, but you can also disable the color toolbar tinting effect in Safari for iPhone and iPad too, which is also the default appearance in iOS 15 and iPadOS 15 or later. Safari for iOS received some other major changes as well, like putting the search bar on the bottom of the screen, but that can be reverted back to the old design if iPhone users aren’t a fan of that change too.
Directly Changing the Safari Theme Color via HTML
For the web developers and geekier folks, you may be wondering “how do I change the Safari tab theme color directly?” and it turns out you can do that through a new HTML “theme-color” meta tag recognized by Safari. This is placed within the page header, like so:
<head>
<meta name="theme-color" content="#fff"
media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000"
media="(prefers-color-scheme: dark)">
</head>
You can use also specify the coloration for dark and light mode themes independently by replacing “#fff” and “#000” with your colors of choice for the light and dark themes, respectively.
Do you have any particular opinions or thoughts on the coloring effect of the Safari tab/toolbar/search bar on the Mac? Did you disable this feature or leave it on?
This preference does not exist in the BigSur version of Safari 15. (and presumably not the Catalina version either) You can only disable tab colors in Monterey which is still in Beta.
You can disable Tab Colors in Safari 15 on Monterey, Big Sur, or Catalina. If you do not see the preference setting in Safari for macOS then it is not Safari 15.
I have Safari 15.1 with Monterey 12.0.1 and still no preference for disabling tab colors is Safari. I don’t understand this… And my tabs in the tab bar are not rounded and there are no space between them.
It’s the same for me too. Safari 15.1 and Monterey 12.0.1, and the preference is nowhere to be seen.
Also, I don’t think it’s turned on for me, as I haven’t come across any websites with the feature (I actually came here looking for how to turn it on). I’m building a website with the theme-color meta tag, but it’s not doing anything.
However, my tabs are rounded and spaced out.
Whoever wrote the article must be referring to iOS devices. I’m using the latest (Aug 18/22) Safari on Catalina.