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

Ionic Framework ionic-v3
1

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.

2 
<ion-tabs color="primary">
...
</ion-tabs>
3 Likes
3

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

4

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

5

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

$tabs-ios-tab-icon-color
$tabs-ios-tab-icon-color-active
$tabs-md-tab-icon-color
$tabs-md-tab-icon-color-active

6

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
7

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.:
selectContact(){
    this.color = "danger";
  }

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

9

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.

3 Likes