Ionic: Custom tab-bar background color on comment page?

Question

Ionic 1.2

I'm trying to change the background color of the tab bar on a specific screen in my app where I have a text input sitting on top of the tab bar, similar to how Twitter's tab bar looks (see image below).

In other words, I want to change the background color of my tab bar from, say, black to white on a specific screen and otherwise keep the tab bar the default black color. The idea would be similar to adding a class to a specific screen to change the style of the tab bar.

Any thoughts? Any help much appreciated!

Answer 1

You can do this using ng-style .

1.) tabs.html

Add ng-style="{'background-color': Color}" inside <ion-tabs> .

<ion-tabs class="tabs-icon-top tabs-color-active-light" ng-style="{'background-color': Color}">

  //

</ion-tabs>

2.) controllers.js

Add $rootScope as dependency and following $ionicView to each controller (use same color in controllers where you have a text input sitting on top of the tab bar). For each tab choose different color.

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

3.) style.css

.tabs {
   background-color: inherit;
}