CODEWITHSUNDEEP
ionic-framework
MatTaNg
MatTaNg

Reputation: 895

How do I change the color of an active ionic tab?

I am trying to change the background color of an active ionic tab from white to green. I found this thread but it seems like the answer doesn't work anymore:

https://forum.ionicframework.com/t/change-color-of-active-state-in-tab-icons/12547

Does anybody know how to do this?

Thanks.

Upvotes: 2

Views: 12551

Answers (4)

Edison Augusthy
Edison Augusthy

Reputation: 1573

add style to .tab-item-active class like this

.tab-item-active {
    background:green;
}

see this codepen:http://codepen.io/edisonpappi/pen/aWvmjz

Upvotes: 4

akmozo
akmozo

Reputation: 9839

You can also use the SCSS $tabs-ios-tab-icon-color-active var inside your theme/variables.scss, for example : 

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$tabs-ios-tab-icon-color: #00f;
$tabs-ios-tab-icon-color-active: #f00;


// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$tabs-md-tab-icon-color: #00f;
$tabs-md-tab-icon-color-active: #f00;

which will give you something like this :

ionic-tabs-md-tab-icon-color-active-example

For more, take a look here.

Hope that can help.

Upvotes: 0

Rajat
Rajat

Reputation: 692

For me, setting the CSS rules for the class ".activated" worked.

.activated {
   background-color: blue;
}

This class is applied momentarily to the tab item that is selected.

Upvotes: 2

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

This can be done in the following way:

Ionic has the following css:

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
}

you need to override it as follows:

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    color: red;
}

Upvotes: 0

Related Questions