Ion-card looks bad in dark mode

Ionic Framework
1

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:

image
image379×746 42.9 KB

2

Unsure but may be that the docs are wrong here. I think you should only have code inside of the card’s subcomponents like header, content and footer not directly under the card itself.

Try to move everything under ion-card-content

3

That will create more buffer around the card, so you can see the edges of it. But the ion-item component always has a black background that matches the app background and not the ion-card or ion-card-content component background color.

These components do match background colors with the card when in light mode. Also noticing activated slot doesn’t highlight in dark mode. Probably should just submit a bug rather than a forum question…

4

You would need to edit the css of the other components inside the card to match the gray background color of the card.