Capacitor/IOS Status Bar

I am having trouble with the IOS status bar. I would like to have a background color on the status bar, but looks like you cannot do this with Capacitor. I would like the background colour due to the screenshot:

The status bar looks a bit lost. Does anyone have any suggestions as to how this can be resolved and best practices for webview?


Are you using the Capacitor Status Bar Plugin? You should be able to set the background color using StatusBar.setBackgroundColor()

1 Like

Can you share your code for the page/modal?

It looks as if the <ion-header> may have been placed in the <ion-content>.

I am not using ionic, just capacitor with my own custom styles

Hi, I have not tried this but it says it has been disabled on IOS in the docs?

I’m having the same status bar overlapping problem your screen shot shows. The Capacitor Status Bar plug in says the overlap settings do not work for iOS. How am I supposed to fix this?
I’ve seen many old posts with CSS workarounds that do not work anymore.

Please someone drop a light on this issue for us! Thanks!

1 Like

Any update on this please?

If the Status Bar plugin doesn’t fit your needs, you can manually set the status bar color in the Main.storyboard file.

Go to the Main.storyboard file; select the View; and in the Attributes Inspector, change the Background Color to whichever color you’d like. The background color includes the status bar and shouldn’t affect your web app since the webview extends to the top of the screen (minus the statusbar).

Thanks @thomasvidas. I will try this!

@thomasvidas Hi, looks like you can’t do this anymore, I couldnt see the option and says it has been removed online - any ideas?