Unable to change status bar background color in Ionic 6 with Capacitor 5 - iOS

Capacitor
1

I am using Ionic 6 with Capacitor 5 and I am unable to change the status bar background color on iOS. I have tried using the capacitor status bar plugin, but it seems to not work in the newer versions of Ionic.

I have searched the Ionic community and Google, but I have not been able to find a solution. Is it actually discontinued since iOS 13 version?

Can anyone help?

Additional details:

Ionic:

Ionic CLI : 7.1.1 (/Users/…/.nvm/versions/node/v16.20.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.7.4
@angular-devkit/build-angular : 14.2.11
@angular-devkit/schematics : 14.2.11
@angular/cli : 14.2.11
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 5.0.3
@capacitor/android : 5.0.3
@capacitor/core : 5.0.3
@capacitor/ios : 5.0.3

Cordova:

Cordova CLI : 11.1.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : 0.15.4
native-run : 1.7.2

System:

Android SDK Tools : 26.1.1 (/…AndroidStudio)
ios-deploy : 1.12.1
NodeJS : v16.20.0 (/…nvm/versions/node/v16.20.0/bin/node)
npm : 8.19.4
OS : macOS Ventura
Xcode : Xcode 14.3.1 Build version 14E300c

2

@capacitor/status-bar says:

setBackgroundColor and setOverlaysWebView are currently not supported on iOS devices. (source)

1 Like
3

Hi, friend, I’m sorry, I said it all wrong.

In fact, it’s the hex of the background that works for Android, but not on iOS.

The

setBackgroundColor(options: BackgroundColorOptions) => Promise<void>

method only works for Android. I just wanted to make sure if it’s something on iOS or if it’s a limitation of the plugin.

4

A quick Google search of “change ios status bar color” points to that it is possible but currently this specific plugin doesn’t support it. So a limitation of the plugin.

5

Thank you, friend. I had looked at the part about the subject, but I didn’t try all the native solutions. Some that I tried didn’t work, I’m sure I was doing something wrong.

Thanks for clarifying that part of the plugin, it’s already helped a lot.

2 Likes
6

I’m curious about what you found when you googled “change ios status bar color”, where it says that changing the iOS status bar background color is possible.

As far as I know, changing the status bar background color on iOS has not been possible since iOS 7 as Apple made the status bar background color transparent. They only allow to change the color of the text, but not the background as it’s always transparent.

7

I could be wrong…lol. I guess a lot of the stuff just mentions the UIStatusBarStyle.

Here are two possible solutions. I have no idea if they work. Someone else more familiar with iOS might be able to help. EDIT: Oops, didn’t realize it was you @julio-ionic asking. Thought it was the OP :slight_smile: You would definitely know better!

1 Like
8

Thanks man, I’ll take a look and see what I can do. Thanks for the support.

May the Force be with you. :smiley:

9

Those solutions wrap the app in a navigation controller which has a navigation bar and you change the color of the navigation bar, not the status bar, then your app will always have a navigation bar on top, so you’ll have to remove your html header if you had one.

Or add a view with the size of the status bar and color that view, that’s what the Cordova plugin does and it brings a lot of trouble, specially when rotating or presenting view controllers on top (like camera or browser plugins).

In my opinion, the best way of coloring the top of your app is by using CSS since the status bar is transparent, Apple provides the safe area insets which tell you where the status bar is located and help you with the CSS coloring.

2 Likes
10

We lost any hope a while ago, the only thing we can change is having its content light or dark by changing the build settings in XCode. Everything else fails.

11

Yes, many things went wrong. Lastly, I changed the body color, and it works, but the final result didn’t turn out well; it looks very strange.

The question that remains is, how are other frameworks like React Native or Flutter dealing with this situation? Can they also change the status bar color? It’s complicated.

I even considered using the Cordova status bar because it seems to still be working. However, since I’m migrating everything to Capacitor and moving away from Cordova, going back to the Cordova plugin is a bit complicated. Anyway, I’ll keep trying and researching.

I know the status bar (background color) is just a small detail, but it adds a certain charm to the app.

12

This is what I do. I use the Capacitor Status Bar plugin with the following settings:

StatusBar.setStyle({ style: Style.Dark })

if (DeviceInfoHelper.isAndroid()) {
    StatusBar.setOverlaysWebView({ overlay: true })
}

On both Android and iOS, the background color of my app is what is shown in the status bar.

13

Does it not pick the primary color as the background color?

14

This is what my app looks like. I think as Julio said, the status bar is transparent and the app background color comes through.

image

1 Like
15

Ok, but how do you specify that colour?

Is it the variable --ion-color-primary ?

16

Probably --ion-background-color. I’ve done some custom stuff. In my IonHeader I set the background color in an inner div with normal CSS.

1 Like
17

Hey guys, I applied a background to the header, and it worked, but it wasn’t well-received by the team because it created an odd layout for the app. Honestly, I don’t know what to do, it’s a bit frustrating; it was supposed to be simple, :sweat_smile:, but it never is. Thanks to everyone who contributes with ideas, thank you very much.

18

I’m curious what the odd layout is. It shouldn’t affect the layout, it is literally just changing the background color of the status/notification bar :grin:

19

Haha, yes, of course!
Our layout consists of a white background header with a green status bar. (Android looks beautiful, lol).
However, on iOS, there’s a plugin limitation that doesn’t allow adding a background color only to the status bar, and that’s tough.

As a result, it looks odd on phones with an infinity display, as the green header and status bar merge, making it appear huge. The problem is that the header in our app behaves differently on each screen because it was created as a component, encapsulating the ion-header, and so on. :sweat_smile: :sweat_smile:

20

I am not familiar enough with all iOS phones. Is the status bar different heights depending on the model? Curious if you could just add your own “stripe” across the top above your ion-header to act as the background of the status bar.

1 Like