How to make toolbar, header, ion-segments/buttons transparent

Ionic Framework Ionic Angular
1

I’m trying to set the background of my ion-segment-buttons to transparent, so that the background being set behind these elements shows through. Can someone provide me an example of this? I have tried doing something like :

<ion-header>
  <ion-toolbar mode="md" style="background-color: transparent !important;">
    <ion-segment style="background-color: transparent !important;" mode="md">
      <ion-segment-button style="background-color: transparent !important;" value="future" checked>
        <ion-label style="background-color: transparent !important;">Future</ion-label>
      </ion-segment-button>
      <ion-segment-button style="background-color: transparent !important;" value="history">
        <ion-label style="background-color: transparent !important;">History</ion-label>
      </ion-segment-button>
      <ion-segment-button style="background-color: transparent !important;" value="matrix">
        <ion-label style="background-color: transparent !important;">Matrix</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content style="background: red;">

</ion-content>

In this example, I would like to show the segments as red matching the colors in the background, however, what I’m left with is:

image

2

Use background instead of background-color and you can use custom scss variables of ionic components. where as you can change the color selected etc etc

3

I got this to work on ionic 7 by making the <ion-content> fullscreen and then setting the toolbar css background variable to transparent.

In the html file:

<ion-content [fullscreen]="true">
</ion-content>

And then in the css file:

ion-toolbar {
    --background: transparent;
}

I am working on ionic 7 but I guest it may work on ionic 6 and 4.