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

Hey guys, I achieved a good result by modifying the global SCSS, doing it this way:

 .ios {
  // My component custom header
  app-header {
    top: 0px;
    position: relative;
    width: 100%;
    z-index: 10000;

  ion-header {
    background: var(--ion-color-primary);
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    --ion-safe-area-top: 2px;
    --ion-safe-area-bottom: 20px;

  ion-content {
    // It might not be necessary, you need to test it in the application, in my case, I needed it.
    --offset-top: 15px !important;

There might be issues, as I couldn’t test it on various devices, but it looked great on some devices like iPhone 14 Pro Max, iPhone 11, and the real device iPhone SE. It’s not a perfect solution, but it worked for me.


please check below for ionic capacitor 5 apps
by doing this workaround we can use single setBackgroundColor method to set background color in both Platforms (Android | ios)
How to change the colour of carrier and clock in iOS and Android with IONIC?