[Resolved] Changing background colour of tabs

Ionic Framework ionic-v3
1

Hi,

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,
Pav

2

You can set color’s name in ion-tabs
custom color : Theming your Ionic 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>
</ion-tabs>

regards.

3

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

Thanks!

1 Like