Change ion-view header color in ionic

Question

I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:

<ion-view view-title="Search">   <ion-content>     <h1>Search</h1>   </ion-content> </ion-view> 

I tried:

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

But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?

Answer 1

Some ways to do this:

1. You could add the ion-nav-bar to each view.

   <ion-view view-title="Page 1">   <ion-nav-bar class="bar-balanced">     <ion-nav-back-button></ion-nav-back-button>   </ion-nav-bar>   <ion-content>     ...   </ion-content> </ion-view> 

   Codepen example

2. You could also update the background-color (and any other properties) by using ng-style

   Main navbar:

    <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">     <ion-nav-back-button></ion-nav-back-button>   </ion-nav-bar> 

   CSS:

   .nav-bar-block, .bar {   background-color: inherit !important; } 

   Controller:

   $scope.$on('$ionicView.beforeEnter', function() {     $rootScope.viewColor = 'green'; });  

   Codepen example

Answer 2

Could not find a clean solution for this, but one hack might be to use the $stateChangeStart event and set the class name manually.

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

EDIT The idea is same for sidebar template,

Updated fiddle

Notice the line

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

in menu.html template, it denotes the base header color class. but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStart event,

code:

.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. here the state name is checked to see which page is activating ex. app.search
2. then according to requirement specific color class is assigned removing other color classes.

ionic color options

hope this helps.