How make um colorful tabs on Ionic 3?

Question

I'm trying to make a colored navigation bar in Ionic 3.

The menu that I want to build:

I already tried to use styles for each ion-tab but it did not work, I also tried Overriding Ionic Sass Variables, I was not successful either. Can someone help me?

Thank you.

Answer 1

You can give a different color to tab like this.
<ion-tabs>
      <ion-tab color="primary"></ion-tab>
      <ion-tab color="secondary"></ion-tab>
</ion-tabs>

Declare a color in theme/variables.scss
Like :

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

Answer 2

I check the generated HTML and code this on variables.scss :

.tab-button.icon-only#tab-t0-0{
  background-color: #fcaf17;
}

.tab-button.icon-only#tab-t0-1{
  background-color: #f37043;
}

.tab-button.icon-only#tab-t0-2{
  background-color: #ef4056;
}

.tab-button.icon-only#tab-t0-3{
  background-color: #46c3e6;
}

.tab-button.icon-only#tab-t0-4{
  background-color: #88c240;
}

$tabs-md-tab-icon-color : #FFFFFF;
$tabs-md-tab-icon-color-active : #272525;

Where tab-t0-x is the id of tab x, maybe not the best solution, but solved my problem.