Ionic-native: Cannot change StatusBar color when using Crosswalk in Ionic 2 RC (Appears blue with white text)

[escobar5]

There seems to be a problem when using Crosswalk on Ionic2 RC. It doesn't seem to be possible to change the StatusBar color, it always appears blue with white text.

https://forum.ionicframework.com/t/ionic-rc0-plugin-statusbar-not-working-in-android-with-crosswalk/66449/3

[ihadeed]

This would be an issue with the plugin or with crosswalk.

[Tobiaswk]

@ihadeed I would like to have this issue reopened or at least investigated further. It seems that there is a shortcoming with the Platform class from what I can gather.

My evidence;

platform.ready().then(() => {
      setTimeout(() => {
        StatusBar.backgroundColorByHexString('#7c7472'); // set status bar to white
      },1000);
    });

It seems like Platform.ready method signals "ready" too early. When introducing a timeout like in the above code the statusbar is filled with the correct color. It could be that the problem is only present with Crosswalk, but the problem only persists with Ionic2, not Ionic1.

[ihadeed]

@Tobiaswk what version of Ionic are you using?

[Tobiaswk]

@ihadeed I'm on RC3.

[escobar5]

Can confirm that, that is the workaround people is using for the moment: https://forum.ionicframework.com/t/ionic2-rc0-and-ionic2-rc1-plugin-statusbar-not-working-in-android-with-crosswalk/66449/18

The problem is that when viewed in task manager it's still blue.

Also, people are reporting this only happens with ionic

[mlynch]

Thanks for the info everyone. It seems suspect this would only be related to ionic. As a test, can you try going outside of Ionic and doing something like:

document.addEventListener("deviceready", function() {
  window.StatusBar.backgroundColorByHexString('#7c7472');
}, false)

[markharding]

Resolved this by changing <meta name="theme-color" content="#4e8ef7"> in index.html

[Artfloriani]

@markharding This resolved the issue for me, cheers.

It seems that Statusbar is setting the app color on deviceready, then this tag on index.html is overriding it.

[tompradana]

This code worked for me:

constructor(public platform: Platform) {
    if ( this.platform.is('android') ) {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            // Splashscreen.hide();
            StatusBar.overlaysWebView(false);
            StatusBar.backgroundColorByHexString('#00FFFF');
        });
    }
}

I do not understand why, but make sure the platform is android / ios.