ionic-framework - icon - ionic tabs

¿Cómo cambio el color del texto de la barra superior a blanco en mi aplicación Ionic?

Question

Cambié el encabezado a un color más oscuro usando esto:

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

Cuando lo ejecuto en ios, el texto de la barra de estado (hora, portadora, batería, etc.) en la parte superior es negro y difícil de ver en el fondo oscuro. ¿Cómo hago que este texto sea blanco?

Answer 1

Con la statusbar del complemento y ngCordova es bastante 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
});

Eche un vistazo al artículo completo aquí: http://learn.ionicframework.com/formulas/customizing-the-status-bar/

ACTUALIZACIÓN - Sin ngCordova:

El proyecto Ionic predeterminado viene con el complemento de barra de estado instalado. Si tiene esta declaración dentro de su ejecución probablemente su proyecto ya tenga:

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

Entonces el código se convierte en:

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
    }
});

ACTUALIZACIÓN II

Con una nueva versión 2.x de cordova-plugin-statusbar el método StatusBar.style() fue sustituido por estos nuevos métodos:

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

Verifique la documentación del complemento