Ionic unable to change active segment button color

Issue

I have a small problem with my Ionic 5 and Angular application.
So here it is, I have an ionic segment but it is impossible for me to change the background colour of the segment button that is active/checked.
In addition to the official documentation, I tried many different methods read on forums but it remains impossible.
Can you help me?

ion-segment in my home.html :

<ion-segment value='favorites' [(ngModel)]="segmentModel" (ionChange)="segmentChanged($event)" color="maindark" mode='ios' swipeGesture='true' scrollable='true'>
    <ion-segment-button value="favorites">
      <ion-label>Favoris</ion-label>
    </ion-segment-button>
    <ion-segment-button value="settings">
      <ion-label>Paramètres</ion-label>
    </ion-segment-button>
</ion-segment>

SCSS of the segment in home.scss :

ion-segment {
  padding: 5px 0 5px 0;
  margin: 5vh 15vw 0 15vw;
  background-color: #2d303aab;
}

ion-segment-button {
  padding: 7px 0 7px 0;
  font-size: 16px;
  color: white;
}

.segment-button-checked {
  color: #F8CF80 !important; // it works properly 

  // Tried all of that but nothing work
  background-color: #2D303A !important; 
  background: #2D303A !important; 
  --background: #2D303A !important; 
  --background-color: #2D303A !important; 
  --background-checked: #2D303A !important; 
}

the result :

Solution

The challenge you are experiencing has to do with the shadow DOM.

You could pierce the shadow DOM with something like:

::part(indicator-background) {
  background-color: #2D303A;
}

though that might be a little to global.

possibly ng-deep may work and be more targeted.

.segment-button-checked ::ng-deep{
  background-color: #2D303A;
}

Answered By - user796446