Ion-card looks bad in dark mode

When I use an ion-card component, and I put another component type inside of it, such as a ion-item or ion-list, the rendering in dark mode looks really bad. The card has this gray background color, but then the other components are rendered with a black background. I can’t find any properties to ensure the background properties match. I can start messing with the css properties myself, but I don’t feel like I should need to with this barebone of an example. Here is an example directly from this page: ion-card: Card UI Components for Ionic Framework API

is there something I should be adding do have this rendered nicely in dark mode?

my html:

<ion-card>
  <ion-item>
    <ion-icon name="pin" slot="start"></ion-icon>
    <ion-label>ion-item in a card, icon left, button right</ion-label>
    <ion-button fill="outline" slot="end">View</ion-button>
  </ion-item>

  <ion-card-content>
    This is content, without any paragraph or header tags,
    within an ion-card-content element.
  </ion-card-content>
</ion-card>

<ion-card>
  <ion-item href="#" class="ion-activated">
    <ion-icon name="wifi" slot="start"></ion-icon>
    <ion-label>Card Link Item 1 activated</ion-label>
  </ion-item>

  <ion-item href="#">
    <ion-icon name="wine" slot="start"></ion-icon>
    <ion-label>Card Link Item 2</ion-label>
  </ion-item>

  <ion-item class="ion-activated">
    <ion-icon name="warning" slot="start"></ion-icon>
    <ion-label>Card Button Item 1 activated</ion-label>
  </ion-item>

  <ion-item>
    <ion-icon name="walk" slot="start"></ion-icon>
    <ion-label>Card Button Item 2</ion-label>
  </ion-item>
</ion-card>

the result:

3 posts - 2 participants

Read full topic