How do I change the top bar text color to white in my Ionic App?
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