Adaptive Safari Tab Bar Color

Would be awesome if Supernotes blended in with Safari’s compact tab bar. There’s a flag you can set and Safari will read that flag and use that flag’s color to color the tab bar. The first image is Supernotes and you can see the tab bar is the neutral color. The second image is of the Spline website and you can see the tab bar uses the same color as the website’s background color and it blends right in which is great.

It’s a subtle thing that helps to make you feel more focused cause it hides the window’s normal chrome making it less distracting.

Here’s a forum discussion of the meta tag to set: Manually set Safari 15 tab color-t… | Apple Developer Forums

Hi @marlonr,

So we actually already do this, but seems like the most recent version of Safari doesn’t allow for the use of CSS color variable names. We’ll switch this out for hardcoded color values in the next update :slight_smile:

Although it will look more like this blending in with the left hand toolbar, and still show a subtle difference between the navigation bar and the app itself.


Ahh okay cool. That would be neat if you could still get that curved border in there from the left side through the top too like the app. I’m nit picking, I know haha

As cool as a rounded curved border would be it’s not something we would implement. There are many different versions of Safari and people have varied preferences when it comes to how they like their navigation bar, so it’s best to be consistent on the web.

If you want a curved border, you’ll just have to use the Desktop App :wink:

So this has been implemented in the upcoming 3.1 release.

Managing expectations, there is a macOS limitation where light themes will not modify the Safari navigation appearance if your global system appearance is set to dark mode, as below:

macOS Dark mode seems to ignore any light values. All other combinations, including the inverse (light system appearance, with a night Supernotes theme) does match, as below:

1 Like

Ahh ok. Thanks for the heads up.