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.

2 Likes

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?

It seems there might be compatibility issues with the capacitor status bar plugin in newer versions of Ionic. Have you tried reaching out to the Ionic support team directly? They might have insights or workarounds for your specific setup.

1 Like