Change background color segment-button-indicator-background in ionic 5

how to change background color in shadow-root in ion-segment-button in shadow-root in ion-segment-button checked in mod ios in ionic 5?
this always white.
I changed property color=“success” but not work.

<ion-segment (ionChange)="segmentChanged($event)" mode="ios" color="success" #daySegment>

  <ion-segment-button value="0" mode="ios" color="success">
    <ion-label>{{ 'TODAY' | translate }}</ion-label>

  <ion-segment-button value="1" mode="ios" color="success">
    <ion-label>{{ 'TOMORROW' | translate }}</ion-label>

  <ion-segment-button value="2" mode="ios" color="success">
    <ion-label>{{ 'DAY_AFTER_TOMORROW' | translate }}</ion-label>


As described in the docs:

export class HomePage {
  fruits = ["apple", "banana", "cherry"];
  eating = "";
<ion-segment [(ngModel)]="eating">
  <ion-segment-button *ngFor="let fruit of fruits">{{fruit}}</ion-segment-button>
ion-segment-button {
  --background-checked: var(--ion-color-success);
  --color-checked: var(--ion-color-success-contrast);

Hello, I have the same problem, I used the solution, but the background color is below a white layer that belongs to a #shadow root div, I tried:

div.segment-button-indicator-background {
background: transparent! important;

But it does not work.

Might you help me?

Thank you

Hi, this is the solution for the problem i presented:

      --indicator-box-shadow: transparent!important;
      border-radius: 2.5rem !important;
      padding: 0.7rem;
      margin: 0;
      --background-checked: linear-gradient(to right, #2d2e87, #0083CB)!important;
      --color-checked: white;
      --indicator-color : transparent!important; /* this solution */


Hello. None of the solutions are viable when the segment is located in the header/toolbar. Is there any workaround or it is a bug?