How do I change the color of the iontabs?

Question

I would change the color of the ion tab, I managed to change the color of the icons and the text, but the tab itself I can not modify, I am very beginner in IONIC 3. I will show the code until then.

home-delivery.html

<ion-tabs selectedIndex="2" class="teste" >
    <ion-tab [root]="entregas" tabIcon="cube" tabTitle="Entrega"></ion-tab>
    <ion-tab [root]="perfil" tabIcon="person" tabTitle="perfil" ></ion-tab>
    <ion-tab [root]="configuracao" tabIcon="settings" tabTitle="configuracao"></ion-tab>
</ion-tabs>

home-delivery.scss.

page-home-entregador {
    .teste{
        background: #545454;
    }
}

tried other methods but did not work so I started trying anything. If anyone can help, thank you.

Answer 1

Tab colors can be changed using Sass variables. See the conference app for an example: https://github.com/driftyco/ionic-conference-app/tree/master/src/theme404

In variables.scss:

// Use the primary color as the background for the toolbar-md-background
$toolbar-md-background:                   color($colors, primary);

// Use the default background for the tabbar since it inherits from toolbar
$tabbar-md-background:                    #f8f8f8;

// Change the color of the tabs text
$tab-button-md-active-color:              color($colors, primary);
$tab-button-md-inactive-color:            #8c8c8c;

// Change the color of the segment button text
$toolbar-md-active-color:                 #fff;
$toolbar-md-inactive-color:               #fff;
$segment-button-md-text-color-activated:  #fff;

Answer 2

Hi! All quiet?

You can add classes to the tab as well, for example:

In HTML:

<ion-tabs selectedIndex="2" color="verd" >
    <ion-tab [root]="entregas" tabIcon="cube" tabTitle="Entrega" class="entrega"></ion-tab>
    <ion-tab [root]="perfil" tabIcon="person" tabTitle="perfil" class="perfil"></ion-tab>
    <ion-tab [root]="configuracao" tabIcon="settings" tabTitle="configuracao" class="config"></ion-tab>
</ion-tabs>

So just refer to css normally by the class name that works. :)

Something like:

ion-tabs ion-tab.entrega { ... }
ion-tabs ion-tab.perfil{ ... }
ion-tabs ion-tab.config{ ... }

Answer 3

I managed to solve by doing some tests, here this resolution:

<ion-tabs selectedIndex="2" color="verd" >
    <ion-tab [root]="entregas" tabIcon="cube" tabTitle="Entrega"></ion-tab>
    <ion-tab [root]="perfil" tabIcon="person" tabTitle="perfil" ></ion-tab>
    <ion-tab [root]="configuracao" tabIcon="settings" tabTitle="configuracao"></ion-tab>
</ion-tabs>

this "Verd" in color="verd" is a color I added in variable.scss