How to Add Support for Safari’s New Customisable Tab Bar in Your Website

9th June 2021

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.

Tags How To Safari
By Chris Hannah. Say hello on Micro.blog, Twitter, or email.