So, we can add the following meta tag to the HTML with the color #673AAC like so. It only makes sense to have a tab bar color that falls into the same color region. This will tell Safari to set this color for the website when it’s opened in a tab.įor instance, as you can tell, my blog has got a purple-ish accent to it. So, the way how this works is, you need to add the theme-color meta tag in your HTML and set your desired color in it. Used to display the page and line number in a word processor, for example. Normal - occupies part of the status bar and may be hidden by temporary messages.

Used to explain tool tip texts or menu entries, for example. GitHub - dmoptimal/nativescript-angular-ios-statusbar-issue: Example of an issue in nativescript angular where you cant style the status bar per view in ios. Each status indicator falls into one of three categories: Temporary - briefly occupies most of the status bar. While Safari 15 can change the tab bar color intelligently, you, as a website owner, can also change this behavior as per your need by adding just a single line in your HTML. Example of an issue in nativescript angular where you cant style the status bar per view in ios. That’s pretty nice in my opinion and adds aesthetics to the overall web browsing experience.

This makes the website blend in really nicely with the entire browser window. So, if your website’s background is pink, the tab bar color will also be pink. The part of this all-new design is the adaptive theming of the tab bar.

You can control status bar through StatusBar component from react-native module. Solve this problem with StatusBar component. And while a lot of good stuff was released in the event, I, as a web developer, was pretty excited for Safari 15 and its all-new design in the macOS and the iPadOS. Sometimes your contents are placed under status bar or notch. It’s a wrap for Apple’s WWDC 2021 last week.

Status bar ios html example