Ionic 5 Capacitor - How to change the status bar background color dynamically on IOS

user_5442743 0
Viewed 2816

I'm using Capacitor with Ionic 5 and I need to change the status bar background color dynamically (different colors on different pages). On Android everything works fine (both capacitor and cordova plugins work), but on IOS I found out some limitations:

  1. cordova-plugin-statusbar is not compatible with Capacitor for IOS
  2. From Capacitor status bar plugin, the method setBackgroundColor is not supported for IOS

Is there any workaround to achieve my goal on IOS?

ionic5 cordova-plugins ionic-framework ios
2 Answers

Finally, I found a solution. Status bar on IOS is transparent, so there is an easy solution to just set the background color on the body of the app, for example: document.body.style.backgroundColor = "#e34233";.

user_54427430

I am using "cordova-plugin-statusbar" varsion 2.4.2

I have solved this issue by this:

  this.statusBar.backgroundColorByHexString('#3300000000');

You can dynamically set your status bar color

user_75911290
Related