Avoid changing the background of Status Bar on iOS in Ionic

Question

I'm doing a mobile app using Ionic 6.1.4 and Capacitor 3.5.1.

Android, looks good by default, black background and white icons on any screen.

iOS, always has whatever the background color I have in the ion-content with black icons. Is always like this on any screen. In my app, I have 2 screens with a dark background and the ion-content with the attribute fullscreen.

iOS, as I said, I have two screen with a very dark background, let's replicate it using a black background. See how the icons are not visible anymore?

Component:

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button color="white"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
</ion-content>

Style:

ion-toolbar {
  --background: transparent;
}

ion-content {
  --background: black;
}

How can I change iOS Status Bar to always have a style just like Android? or even better, how can I leave the Status Bar untouched on iOS (app not modifying the Status Bar at all)?

I have tried:

.ios {

  ion-header {
    margin-top: var(--ion-safe-area-top);
  }

  ion-toolbar {
    margin-top: var(--ion-safe-area-top);
    --padding-top: var(--ion-safe-area-top);
    padding-top: var(--ion-safe-area-top);
  }

}

But this just moves all the content down and Status Bar is keeping the background color of my app.

I was thinking to use the plugin called @capacitor/status-bar to change the Status Bar style just on iOS, but it's not so simple in my case. Since I have 2 screens with dark background, I will need to make the Status Bar Dark when enter, and when onDestroy is called, make it back to Light so my other screens which have white background looks good too. I think this is a tedious process. I think there must be a way to avoid this.

My goal is to keep the Status Bar on iOS always the same and with a color that makes the icons visible. I would prefer leaving the Status Bar untouched just like Android do.

Answer 1

Well, I suggest trying one of the followings:

1. If you are using Cordova, use the cordova-status-bar plugin and try setting the statusBar color in the config.xml:

<preference name="StatusBarBackgroundColor" value="#000000" />
    or
<preference name="StatusBarBackgroundColor" value="#ffffff" />

setting it to a value in hex color, probably you want it black, and then setting the text and icons to light or lightcontent as you did in Android by using:

  
<preference name="StatusBarStyle" value="lightcontent" />

2. If you are using Capacitor, install the Capacitor plugin

npm install @capacitor/status-bar
npx cap sync

and then set the color of the background and text using

import { StatusBar, Style } from '@capacitor/status-bar';

// iOS only
window.addEventListener('statusTap', function () {
  console.log('statusbar tapped');
});

const setStatusBarStyleDark = async () => {
  await StatusBar.setStyle({ style: Style.Dark });
};

3. If none of that works, or you just want to change it on iOS try setting it in the global.scss as you were doing but also changing the backgound color and the color:

.ios {
  ion-header {
    margin-top: var(--ion-safe-area-top);
    backgound-color: black;
    color: white;
  }

  ion-toolbar {
    margin-top: var(--ion-safe-area-top);
    --padding-top: var(--ion-safe-area-top);
    padding-top: var(--ion-safe-area-top);
    backgound-color: black;
    color: white;
  }
}

Answer 2

I don't know about Capacitor, but I know that on Cordova for iOS, you need to include viewport-fit=cover in the <meta name="viewport" content="..."> tag of your index.html to do this, e.g.

<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

This works for me when using the cordova-plugin-statusbar plugin, anyway.