Bug with light segment in primary toolbar

[brandyscarney]

Bug Report

There is an issue with the active segment button color where it is black on a light segment in a primary toolbar:

<ion-toolbar color="primary">
  <ion-segment color="light">
    <ion-segment-button value="sunny">
      Sunny
    </ion-segment-button>
    <ion-segment-button value="rainy" checked>
      Rainy
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

[dtaalbers]

I think I am having the same issue with the searchbar.

At first glance its fine. This is the route Tabs > Browse

When I navigate to Tabs > Browse > Categories and then back to Tabs > Browse it shows like this

Btw the searchbar on the Categories page is also black after nagivating Tabs > Browse > Categories. It has the same HTML as the Browse page. See below

My header on the Browse and Categories pages.

<ion-header>
    <ion-toolbar color="primary" no-border-bottom>
        <ion-title>Bladeren</ion-title>
        <ion-buttons slot="right">
            <ion-spinner class="spinner" *ngIf="is_loading"></ion-spinner>
        </ion-buttons>
    </ion-toolbar>
    <ion-searchbar [(ngModel)]="q" [showCancelButton]="true" (ionChange)="search()" (ionClear)="cancel_search()" (ionCancel)="cancel_search()" debounce="850" placeholder="Zoek naar een product" cancelButtonText="Annuleren" animated="true">
    </ion-searchbar>
</ion-header>

I navigate with this:

this.nav_controller.goForward(`/tabs/(browse:categories)?id=${group.id}&parent='Bladeren'`);

Not sure if my issue is related to this one, but it seems so. If it is not related should I create a separate issue for this?

[dtaalbers]

Work around:

ion-header {
  background: var(--ion-color-white) !important;

  ion-searchbar {
      --background: var(--ion-color-light-gray);
  }
}

Variables:
  --ion-color-white: #fff;
  --ion-color-light-gray: #ededed;

[brandyscarney]

@dtaalbers I think this might be related to this: #15121

I believe @manucorporat is working on a fix for that.

[camwiegert]

@brandyscarney I think this is actually related to how we're applying the toolbar colors to segment children without a color attribute. I have a fix I'll push shortly.

[brandyscarney]

@camwiegert Sorry, I was specifically talking about his issue with the black background on toolbars. I don't think that one is related to this issue, and the issue I linked to is what Manu is working on. 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.