How to set a "Primary" background on Segment


Hi everyone,

I was tweaking the ionic-conference-app a little bit and for the schedule page I wanted to set the top Segment to have a Primary background like the example in the doc.

The change the text and underline color only.

A way, I can set that please?

Thank you!


Can you show your code, so we can see what you might have done differently.


Hi @S.G,

Below is my ion-header.

You can see the color=“primary” on the ion-segment, but that just change the text and border-bottom color.
How do I set the background color instead like the example in the doc?

I was thinking about twaeking the .scss to “force” that. But if there is a better way, that will be more clean. :slight_smile:


  <ion-navbar color="primary">

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="primary">
      <ion-segment-button value="all">
      <ion-segment-button value="favorites">

  <ion-toolbar no-border-top>
    <ion-searchbar color="primary"


Ok I see, all you have to do is move color="primary" to the toolbar like this…
<ion-toolbar no-border-top color="primary">

But the button text will also be primary and not visible, so just add a color to them like this…
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">



Thanks a bunch @S.G, it works like a charm now. :slight_smile: