Change tab colors ionic conference app

Ionic Framework Ionic Angular
1

i am trying to change the active tab colors (icon or background) for the ionic conference app. I’ve tried everything i could find. Does anyone know why they won’t change? Here is the tabs code…

html

<ion-tabs>
  <ion-tab-bar slot="bottom">
 
  <ion-tab-button tab="about">
    <ion-icon src="/assets/img/ChurchLogoIcon2.svg" ></ion-icon>
    <ion-label>Home</ion-label>
  </ion-tab-button> 
       
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Calendar</ion-label>
    </ion-tab-button>
 
    <ion-tab-button tab="speakers">
      <ion-icon name="people"></ion-icon>
      <ion-label>Pastors</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="stuffs">
      <ion-icon name="happy"></ion-icon>
      <ion-label>Activies & More</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

scss

.tabbar {
  justify-content: center;
}

.tab-button {
  max-width: 200px;
}

.activated {
  background-color: rgb(235, 4, 4);

}

the “.activated” does nothing at all…

Thanks for taking a look if you happen to gaze by :slight_smile:

2

I found a working solution for someone who wants an easy fix.

i went to /src/theme/variable.scss and i changed the “primary color” to the colors that i wanted. And it changed the default colors in my app to exactly what i wanted.