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

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?


You could try implementing the cordova status bar plugin

I managed to get it working with this:

1 Like

Thanks. I asked on stack overflow also and got pointed to this formula:

Looks like the newer versions of ionic have it built-in, so I just put
in app.js, in the:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      // StatusBar.styleDefault();

I also removed the StatusBar.styleDefault(); that was already in there.

Other options are:
// //Light
// //Black, transulcent
// //Black, opaque
// Statusbar.styleColor(‘black’)
// Statusbar.styleHex(’#FF0000’) //red


Thanks for the reply @iScott, I’d missed that. Makes things much easier.

1 Like

This doesnt seem to work for me. have only tried it through Ionic View. Did you try that?

Ionic view doesn’t support most of the cordova plugins. Status bar is one that won’t work in ionic view, but does work once you compile the app and install it.