Change iOS status bar color in ionic 2 app

Question

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 1

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