styleLightContent not working on iphone 11

[Simbaclaws]

Bug Report

Problem

When creating a dark background color of the statusbar by for example: StatusBar.backgroundColorByHexString('#000000'); and then doing: StatusBar.styleLightContent();

then the text will be black on a black background on ios.

What is expected to happen?

The text should become a light variant on a dark background.

What does actually happen?

The text is dark on a dark background.

Command or Code

StatusBar.styleLightContent();

Environment, Platform, Device

Both on a real device as well as the emulator.

Version information

   Ionic CLI                     : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.2
   @capacitor/core : 2.1.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res                          : 0.14.0
   native-run (update available: 1.0.0) : 0.2.8

System:

   Android SDK Tools : 25.2.4 (/users/doelapp/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   NodeJS            : v12.1.0 (/usr/local/Cellar/node/12.1.0/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.4.1 Build version 11E503a

Checklist

• [ x ] I searched for existing GitHub issues
• [ x ] I updated all Cordova tooling to most recent version
• [ x ] I included all the necessary information above

The following issue might be related: https://github.com/apache/cordova-plugin-statusbar/issues/188

[aacassandra]

@Simbaclaws , Hi friends, I'm also having the same problem, have you got an answer about this?

[Simbaclaws]

Dear @aacassandra, personally because of this bug I decided to use a different native runtime then cordova since I was using ionic framework version 4+. Nowadays some cordova plugins tend to have issues with newer versions of operating systems from android and iOS. And it depends on the maintainers of these specifically made cordova plugins to update them rather then have a company backed solution for all of the plugins you'll need.

I'm using a native runtime for web apps called: capacitor. This is a native runtime created by the ionic team (from the ionic company) instead of individual maintainers. (I'm only using cordova from now on when a specific thing is not available in capacitor)

Currently I'm using status bar from capacitor in order to style my status bar correctly across newer and older versions of ios and android.

Here are 2 services that I made in ionic angular to get information about the platform you're using and to set the statusbar according to the current platform you are on in either a "dark" or "light" mode.

Information service using capacitor:

import { Injectable } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { Platform } from '@ionic/angular';

const { Device } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class InformationService {

  constructor(
    private platform: Platform
  ) { }

  async givePlatform() {
    return this.platform.ready().then(async ()=>{
      const info = await Device.getInfo();
      return info.platform;
    });
  }
}

statusbar service using capacitor:

import { InformationService } from './information.service';
import { Injectable } from '@angular/core';
import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class StatusbarService {

  constructor(
    private info: InformationService
  ) { }

  changeStatusBar(color) {
    this.info.givePlatform().then((platform) => {
      if (platform !== 'web') {
        if (color === 'dark') {
          StatusBar.setStyle({
            style: StatusBarStyle.Dark
          });
          if (platform === 'android') {
            StatusBar.setBackgroundColor({
                color: '#121212'
            });
          } else if (platform === 'ios') {
            StatusBar.setBackgroundColor({
              color: '#000000'
            });
          }
        } else if (color === 'light') {
          StatusBar.setStyle({
            style: StatusBarStyle.Light
          });
          StatusBar.setBackgroundColor({
            color: '#ffffff'
          });
        }
        StatusBar.setOverlaysWebView({
          overlay: false
        });
    }});
  }
}

This can be used like so:

this.statusbar.changeStatusbar('dark');

where statusbar is the imported service.

In my case my app's theme had different dark colors for ios and android, hence I made a platform check that changed the bar color based on the platform. You can change this if you like.

Be weary (all of this is ionic 4+ with angular). I am pretty sure you can add capacitor using any of your beloved frameworks.

In my case I also made a theming service that handles all theming related stuff regarding light and dark mode.

This might not be related to the current cordova plugin issue we're having, but this is how I solved it with an alternative solution in my app.

[aacassandra]

Hi @Simbaclaws , thank you for your quick response. i see you have no problem when using statusbar with capacitor (angular).

I'm using the latest ionic with vuejs3, but not the typescript version, and I'm using the statusbar of the capacitor. as you mentioned above.

only functions to hide and show the statusbar only. but when I try the function below.

StatusBar.setStyle ({
             style: StatusBarStyle.Light
           });
StatusBar.setStyle ({
             style: StatusBarStyle.Dark
           });

it doesn't work out as expected. Likewise using cordova-plugin-statusbar also doesn't work

for this time, I set the statusbar light / dark directly via xcode (deployment info)

I say, thank you for your quick response. sorry for my bad language

[Simbaclaws]

Hey @aacassandra, I think you should set both the style and the background. The style is meant to show dark or light icons in the statusbar. The background is to set the specific background color for that specific style.

So if the style is dark the icons in the bar will be light, and the background should then be set to dark.

For example:

StatusBar.setStyle({
            style: StatusBarStyle.Dark
          });
StatusBar.setBackgroundColor({
              color: '#000000'
            });

StatusBarStyle.Dark == light icons in statusbar StatusBarStyle.Light == dark icons in statusbar StatusBar.setBackgroundColor == background color for status bar

You probably want to use both of them.

Your language is quite readable to me, you have nothing to worry about ;)

EDIT: Also I think you realize that putting these StatusBar.setStyle underneath each other like in your example, will cause the bar to be changed to the one that was set as last style. But I think your example was meant to show which functions to use, rather than using them in that specific order if I'm not mistaken?

[aacassandra]

wow, thanks friends. works well now.