How to Make Your Website Adaptable to iOS 15 Safari’s Design
Manually set tab color for Safari browser within your website
During WWDC 21 Apple revamped Safari’s design. They took a minimalistic approach with toolbar at bottom of the screen with just a handful of controls. The UI was more gesture-focussed and was designed to better utilize iPhone’s edge-to-edge bezel-less display.
For web developers, it provided much more area to display their content. And an opportunity to blend their website’s design with that of Safari’s own interface.
P.S. This implementation works for Safari on macOS and iPadOS platforms as well.
Safari 15
With Safari 15 and above on iPhone, the tab bar separates the Safari window from the underlying area of the notch on the iPhone. It helps with avoiding clipping of the content placed underneath the notch. And house several important information like time, network and battery status.
The good news for web developers is that its color can be changed in order to match the website’s theme. Safari takes care of that automatically, all we need to do is provide the website with the theme color.
Adding a color theme to the website
Setting the color theme for a website is quite simple and straightforward. All we need to do is add a meta tag to the root of the project.
Add your website’s theme color as a hex value under the content attribute. Rebuild your project and you can see it in action
Adapting to Dark Mode
With a generic color theme, the background color of the tab bar would remain the same regardless of the device’s color scheme. Safari provides an option to set an alternate color to accommodate dark mode. Using which separate theme colors can be used for light and dark mode alternatively.
Replace the previous meta tag with the following. And add the preferred theme color for light and dark schemes respectively.
You can test the app by changing the color scheme of your device and Safari’s tab bar will adapt to it automatically.
That’s it!
So, there you have it. Your website is now adaptable to Safari’s minimalistic UI. If you have any questions related to the implementation, you can always reach out to me on Twitter. Ciao.
