Ionic: cannot change iOS status bar color in dark mode

Question

I'm build a progressive web app in Ionic which I want to add to my homescreen and change the background color and text color of the iOS status bar.

What I've done

I installed: "@ionic-native/status-bar": "^5.0.0"

In index.html I defined:

  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="default"/>

And in app.component.ts:

    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });

The problem here is that the status bar will be black since my iPhone is in dark mode. What I would like is to always have the status bar background in white and the text color in black, regardless of whether I'm in dark mode or not.

I've tried many things already, but none of them worked:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

<meta name="apple-mobile-web-app-status-bar-style" content="translucent"/>

    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(false);
      this.statusBar.backgroundColorByName('white');
      this.splashScreen.hide();
    });

The 1st and 2nd option above would just put the status bar background AND text color in white (which means you can't see the status bar at all) and the 3rd option didn't change anything (background still black).

Henrique Belfort Henrique Belfort · Accepted Answer · 2020-07-31T13:54:58

You can add the following settings to your config.xml works as a workaround:

<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
    <string>Light</string>
</config-file>

Based in @unamanic at https://github.com/apache/cordova-plugin-statusbar/issues/148

Ionic: cannot change iOS status bar color in dark mode

1 Answers