"Ionic 2" How do you change the tabs background color?

The Tabs does not seem to come with its own .scss file like the other pages. Any help on how to do this would be appreciated.

<ion-tabs color="primary">

You are making this too easy haha - that is what seems to be confusing. Thank you

Should the same work for the icons themselves?
<ion-tab [root]=“tab1Root” tabTitle=“Feed” tabIcon=“list-box” color=“primary”>

Test it out. But maybe you have to change the active tab color in your src/theme/variables.scss file


Sorry I think I am missing it? I have tried this in the variables.scss

$tabs-ios-tab-icon-color: #32db64;
$tabs-ios-tab-icon-color-active: #32db64;
$tabs-md-tab-icon-color: #32db64;
$tabs-md-tab-icon-color-active: #32db64;

does nothing.

1 Like

Hi @jdutchak, are you trying to change the color of tab background when active? If that’s the case, please try this:

  1. Add [color]=“variable” inside <ion-tabs> tag
  2. Add (ionSelect)="selectContact()" inside <ion-tab> where you want to change the background color when active
  3. Add a string variable to store the value of color
  4. Add a function to change the variable. E.g.:
    this.color = "danger";

For clear explanation, I have created a sample here: https://github.com/jiahao1553/demo-ionic-tabs-color

The best way I came across is to customize it as

.tabs .tabbar {
    background-color: #fff;

This won’t affect the primary color of selected tab.