iOS Status Bar and Home Indicator styling

Capacitor
1

Hello!

I am a product owner and am looking for answers to help my dev team solve a problem we have with status bar and home indicator styling. Basically, I need to know if what we want to do is possible, and if so, would love some direction to documentation that I can share with the team.

Our mobile app is built in Angular using Ionic framework and Capacitor 2.3.

What we would like to do is style the home indicator bar on iOS (I think that is what the very bottom footer is called on iOS) differently than the status bar. As you can see in the screenshot below, the footer and status bar are both blue. We want the footer to be white to match our bottom nav bar like in the screenshot of the mockup.

IMG_4841106894FB-1
IMG_4841106894FB-11125×2436 578 KB
Screen Shot 2021-03-11 at 7.58.27 AM
Screen Shot 2021-03-11 at 7.58.27 AM746×1526 272 KB

We found this documentation on the status bar and my lead dev thinks this says we can’t do what we want to do. Is that correct?

Thanks!

2

You can also use padding with safe-area-inset-bottom to handle the notch and gesture indicator. You can find more details at: Designing Websites for iPhone X | WebKit

3

The native bars are transparent, that blue color comes from your CSS, so yeah, it’s possible to change the color, you just need to figure out which CSS value to change.