Change tab colors ionic conference app

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…


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

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



.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:

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.