How to change color of tabs in ionic app?

Question

I wish to change the active color of my tabs to a custom one. I would also like to change the colour of the icons if possible.

Currently the tab I am on is the color positive and the rest of the tabs are grey.

For those of you who are not familar with ionic but are css geniuses, ionic has a number of default set colours, example: positive=blue, assertive=red.

Here is what I have so far:

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">    

 <!-- Home Tab -->    

 <ion-tab title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home">
    <ion-nav-view name="app-home"></ion-nav-view> 
  </ion-tab>

CSS:

.tabs-color-active-positive, .tabs {
color: #c49137 !important;

}

I have messed around with the css code and declartions but it doesn't make a difference.

Answer 1

First of all, .tabs isn't pointing to anything. So it needs to be corrected or removed from the CSS selector. If you want to target the other 2 elements, you need to add classes to them.

Typically, icons will change color if they have a transparent background & are created as .PNGs. Try changing the color of these Font Awesome icons to see how they can change from black to blue: https://fortawesome.github.io/Font-Awesome/icons/

Now to fix the code:

I assume that there is a </ion-tabs> tag, which is missing from the example above. So I've added it here, alone with additional classes for <ion-tab> & <ion-nav-view>. The .tab class allows you to group multiple tabs together when targeting them using jQuery or via CSS.

HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">      
    <ion-tab class="tab tab-home" title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home">
        <ion-nav-view class="nav-view-home" name="app-home"></ion-nav-view> 
    </ion-tab>
</ion-tabs>

The .tabs-icon-top class name is a root class name. It's optional. It's recommended to use that, so that your CSS code/color won't spill out onto anywhere else on the page which has a .tab or a .tab-home class name applied to it. You may use any one of these CSS selectors & you don't need this entire stack. They simply become more specific as they progress to the right. (Feel free to delete lines 1, 2 or 3 & the comma, as needed.)

CSS:

.tabs-icon-top,
.tabs-icon-top .tab,
.tabs-icon-top .tab .nav-view-home {
    color: #c49137;
}

You can also use this to select all of the tabs, which are namespaced:

.tabs-icon-top .tab {
    color: #c49137;
}

Or this to select an individual tab:

.tabs-icon-top .nav-view-home {
    color: #c49137;
}