[Resolved] Changing background colour of tabs


I have a project with the ‘tabs’ template, however I seem to be unable to change their background colour.

I have tried creating a CSS class and applying it both to the tab element and its children, (I have tried adding !important on the CSS class colour property).

I have tried adding a colour to app.variables.scss and doing it that way but again doesn’t seem to apply the new colour either.

Thanks for any help,

You can set color’s name in ion-tabs
custom color : http://ionicframework.com/docs/v2/theming/theming-your-app/

for example.

<ion-tabs secondary>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>


Ah of course, I’ve tried applying the ‘secondary’ property to the child (ion-tab) but not the parent for some reason.


1 Like