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?