How to change the background color of tab bar and

Question

I want to know how to change the background color of this tab bar as Ionic 4.

I tried to add the --background: white; in ion-tab/ion-tabs but it doesn't work.

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

I'm so curious about this new Ionic 4 :( Please help...

Answer 1

Ionic 4+

ion-tab-bar, ion-tab-button{
 background-color: #ce0013;
}

ion-icon{
  color: #d7d8da;
}

Answer 2

Give ion-tab a class name like

<ion-tab class="tab"></ion-tab>

Now in the scss file provide the background-color for the class named tab

.tab{
   background-color: white;
}

Answer 3

You need to add properties called color. Ionic 4 has predefined colors:

• primary
• secondary
• tertiary

More info in documentation

Sample usage:

<ion-tabs main color="primary">