How to Add Support for Safari’s New Customisable Tab Bar in Your Website
In the new (beta) versions of iOS, iPadOS, and macOS, a redesigned version of Safari includes a new combined address bar and tab bar. Which although, isn’t winning over everyone, it allows for a slight bit of customisation. Your website can provide a colour that will act as a background/tint colour for the new tab bar.
This colour is defined in the
theme-color meta tag, and the
media attribute can be used to provide different colours for Light and Dark appearances.
Here is an example of what I currently have set up for this website to provide the pink accent colour that’s used for links as the theme colour:
<meta name="theme-color" content="rgb(233, 0, 94)" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="rgb(255, 0, 103)" media="(prefers-color-scheme: dark)">
And here is what it looks like:
I’m not totally in favour of the new Safari design myself, but I’m definitely a fan of added customisation.
You can read more about the other changes in the Safari 15 release notes.