Ion-tabs change color

Ionic Framework ionic-v3
1

I’am new how change color in app.scss

<ion-tabs >
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Profil" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Rank" tabIcon="contacts"></ion-tab>
</ion-tabs>
2

I have found thx

<ion-tabs color="dark">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Profil" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Rank" tabIcon="contacts"></ion-tab>
</ion-tabs>
3

If you want to give custom styles do like this:

// all tabs
.tabs-md .tabbar {
    background: #000;
}
// all tabs texts
.tabs-md .tab-button-text {
	font-size: 14px;
	color: #fff;
}
// selected tab
.tabs-md .tab-button[aria-selected=true] {
	background-color: #fff;
}
1 Like