How do I change the top bar text color to white in my Ionic App?

Question

I changed the header to a darker color using this:

<ion-nav-bar class="bar-royal">

When I run it on ios, the status bar text (time, carrier, battery, etc) at the top is black and difficult to see on the dark background. How do I make this text white?

Answer 1

With the plugin statusbar and ngCordova is pretty simple:

var app = angular.module('ionicApp', ['ionic', 'ngCordova']);

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true);

  $cordovaStatusBar.style(1); //Light
  $cordovaStatusBar.style(2); //Black, transulcent
  $cordovaStatusBar.style(3); //Black, opaque
});

Take a look to the full article here: http://learn.ionicframework.com/formulas/customizing-the-status-bar/

UPDATE - Without ngCordova:

Default Ionic project comes with the statusbar plugin installed. If you have this statement inside you run probably your project already have:

if(window.StatusBar) {
  StatusBar.styleDefault();
}

So the code become:

var app = angular.module('ionicApp', ['ionic']);

app.run(function() {
    if(window.StatusBar) {
      StatusBar.overlaysWebView(true);
      StatusBar.style(1); //Light
      StatusBar.style(2); //Black, transulcent
      StatusBar.style(3); //Black, opaque
    }
});

UPDATE II

With a new version 2.x of the cordova-plugin-statusbar the StatusBar.style() method was substituted with these new methods:

StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();

Check the plugin's documentation