Ion-tabs color customization


#1

Hİ,
Im using tab on my project and project work on android & ios

I want to customize tabs affected globally on my project. I tried Sass Variables on document but did not look right…

How can i customize tabs look like this. ?

Capture

<ion-tabs>
  <ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" [tabTitle]="tab3Title" tabIcon="cog"></ion-tab>
</ion-tabs>

#2

I solve this problem

variable.scss


$tabs-md-tab-min-height: 60px;
$tabs-md-tab-icon-size: 2.4em;

.tabs-md .tab-button[aria-selected=true] .icon {
  color: rgb(255, 255, 255) !important; /*your  text color */
  background: #FF8800 !important; /* your background color*/
  // font-size: 40px;
}

.tabs-md .tab-button[aria-selected=false] .icon {  
  color: #FF8800 !important; /* your background color*/
  background: #ffffff !important; /* your background coor*/
  // font-size: 40px;
}

.tabs-md .tab-button[aria-selected=false] {  
  color: #FF8800 !important; /* your background color*/
  // font-size: 40px;
  // background: #ffffff !important; /* your background color*/
}

.tabs-md .tab-button[aria-selected=true] {
  color: #fff !important; /*your  text color */
  background: #FF8800 !important; /* your background color*/
  // font-size: 40px;
}