Cambiar el color del encabezado ion-view en ionic

No pudo encontrar una solución limpia para esto, pero un truco podría ser usar el evento $stateChangeStart y establecer el nombre de la clase manualmente.

angular.module('starter')
.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-header-bar'));
            switch(next.name) {
                case 'tab.chats':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-calm');
                    break;
                case 'tab.dash':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-positive');
                    break;
                default :
                    element.removeClass('bar-calm');
                    element.removeClass('bar-positive');
                    element.addClass('bar-balanced');
            }
        }
    });
});

Fiddle

EDITAR La idea es la misma para la plantilla de barra lateral,

Fiddle actualizado

Observe la línea

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

En el menú.plantilla html, denota la clase de color de encabezado base. pero los cambios posteriores a las páginas, es decir, los estados de color del encabezado deben cambiarse manualmente en $stateChangeStart evento,

Código:

.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            console.log(element);
            switch(next.name) {
                case 'app.search':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-dark');
                    element.addClass('bar-assertive');
                    break;
                case 'app.browse':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-assertive');
                    element.removeClass('bar-dark');
                    element.addClass('bar-energized');
                    break;
                default :
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-assertive');
                    element.addClass('bar-dark');
            }
        }
    });
});

1. aquí se comprueba el nombre del estado para ver qué página está activando ex. app.search
2. luego, de acuerdo con el requisito, se asigna una clase de color específica eliminando otras clases de color.

Opciones de color iónico

Espero que esto ayude.

Si está usando diferentes estados y cada estado tiene un controlador diferente, simplemente tenga una variable scope scope como $scope.stateone = "true", etc. Luego en su ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class toma clases y una expresión, cualquiera que sea la expresión verdadera que sea la clase asignada. puede usar ng-class con cualquier expresión booleana. así es como puedes tener un color diferente en cada página.

He modificado la solución de @shakib para que se ajuste a mis necesidades, en mi caso el usuario establece el tema haciendo clic en el logotipo de la aplicación y por lo tanto el color de la barra debe cambiar. Si este es tu caso no necesitas hacer el switch case porque quieres cambiar todas las vistas

$rootScope.$on("$stateChangeStart", function (event, toState) {
          var element;
          if (toState.name){
              element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
              if (debugMode) console.log(element);
              // I get the bar-class from my localStorage where I keep the user settings
              var saved_bar_class = $localStorage.get('bar-class','bar-calm');

              element.removeClass('bar-pink');
              element.removeClass('bar-calm');
              element.addClass(saved_bar_class);
          //    Here We could use a Switch Case on toState.name to put a different color to each state

          }
      });

También cuando el usuario hace clic en el logotipo de la aplicación, quiero cambiar inmediatamente el color de la barra para dar comentarios al usuario sobre lo que hace ese botón. El código anterior no lo hará porque no hemos cambiado el estado todavía, para arreglar esto simplemente agregue este código a su' cambiar tema ' función

$scope.changeAppTheme = function () {
        var element;
        element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            // some code to select the theme
            element.removeClass('bar-pink');
            element.removeClass('bar-calm');
            element.addClass('bar-pink');
            // some other code
    };

En este caso solo tengo dos colores, el jónico calm y uno rosa que definí Espero que esto ayude a alguien

Lo tenemos trabajando en CSS con:

.title.title-center.header-item {
    background-color: black;
    margin: 0px;
}

Esto significa que solo nos referimos a las clases de encabezado generadas por Angular directamente con este CSS. Espero que esto ayude!

Intente usar el siguiente código:

<ion-view>
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Search</h1>
  </ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Puedes anular $bar-stable-text color (tomado de _variables.scss de ionic lib)

Por ejemplo, en su scss cambie

$bar-stable-text: green !default;

Si quieres cambiar el ion-nav-bar esto aquí funciona como un encanto:

1 . Cree un controlador principal para cuidar de su página de índice y todas las vistas dentro de ella. 2. Agregue esta función al controlador:

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen: <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4 . agregue on-deseleccione ion-tab también si desea que el color vuelva a algún valor cuando se vaya.

5 . ¡Diviértete!

//add these lines in your style.css file under /www/css/ yoyr project    directory
 .title.title-center.header-item {
    background-color:#30393A;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
 }

Pon estas líneas en tu estilo.css bajo /www/css/ directorio de su proyecto ionic

.title.title-center.header-item {
    background-color:#4a87ee;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
}

Si estás usando scss dentro de tu aplicación, puedes crear tu propia clase de barra personalizada y usar los mixins de barra de ionic en ella.

$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);

.bar {
    &.bar-custom {
        @include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
        &.bar-footer{
            background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
        }

        .button {
            @include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
            @include button-clear(#fff, $bar-title-font-size);
        }
    }
}

Después de definir su clase, puede usar su nueva clase de barra personalizada con la directiva ion-nav-bar.

<ion-nav-bar class="bar-custom">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>