Bill Noble Bill Noble - 1 year ago 144
iOS Question

Change iOS status bar color in ionic 2 app

I am following the ionic 2 documentation for setting the iOS status bar color but it is not working. The status bar text is white which means on my white background it is invisible.

The code I have put in my app constructor is:



StatusBar.overlaysWebView(true);
StatusBar.styleDefault();





I have imported StatusBar using:



import {StatusBar} from 'ionic-native';





I have also checked that the cordova statusbar plugin is installed.

Answer Source

You can try like this add this in the config.xml, with the hex value of the color you want to set:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

For ngCordova or ionic-native you can use

  $cordovaStatusbar.styleColor('black');

  $cordovaStatusbar.styleHex('#000');


Or you check on the statusbar cordova plugin github page there are some ways to change the color of status bar: https://github.com/apache/cordova-plugin-statusbar

For Android:

if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("#333");
}

For iOS

On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by color name.

StatusBar.backgroundColorByName("red");

Supported color names are:

black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown

Or
Sets the background color of the statusbar by a hex string.

StatusBar.backgroundColorByHexString("#C0C0C0");

CSS shorthand properties are also supported.

StatusBar.backgroundColorByHexString("#333"); // => #333333
StatusBar.backgroundColorByHexString("#FAB"); // => #FFAABB
On iOS 7, when you set StatusBar.statusBarOverlaysWebView to false, you can set the background color of the statusbar by a hex string (#RRGGBB).

On WP7 and WP8 you can also specify values as #AARRGGBB, where AA is an alpha value

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download