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

ionic-v1
1

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?

Thanks,
-Ira

2

You could try implementing the cordova status bar plugin https://github.com/apache/cordova-plugin-statusbar/blob/master/doc/index.md

I managed to get it working with this:

1 Like
3

Thanks. I asked on stack overflow also and got pointed to this formula:
http://learn.ionicframework.com/formulas/customizing-the-status-bar/

Looks like the newer versions of ionic have it built-in, so I just put
StatusBar.style(1)
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) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      // StatusBar.styleDefault();
      StatusBar.style(1)
    }
  });
})

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

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

2 Likes
4

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

1 Like
5

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

6

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.