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);
1 Like

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?

Thank you so much. I just changed mode to ios and everything works perfectly :slight_smile:

For the record, color="primary" on ion-segment seems to be bugged. Remove it and set the color using css.

ion-segment-button {
  --background-checked: var(--ion-color-primary);
  --color-checked: var(--ion-color-primary-contrast);
  --indicator-color: transparent;
1 Like

Wow what a hack. Works though. Sometimes these simple changes are such a challenge.

It seems to be still bugged. Your solution thankfully fixes the color, but unfortunately the smooth animation is gone. Do you another solution for that?