bug: Items background colour in Card when active Dark theme

[Uolsen]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

In Dark mode in Card (ion-card) the items (ion-item) have different background than the card.

Expected Behavior

It should be the same colour as in "light" mode.

Steps to Reproduce

I forked default "Card with Items" code from official documentation and only changed theme to "dark.always.css".

https://ionicframework.com/docs/api/card#list-card

Code Reproduction URL

https://stackblitz.com/edit/hp73tq62?file=src%2FApp.vue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : not installed
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v21.7.3
npm : 10.5.0
OS : macOS Unknown

Additional Information

No response

[Uolsen]

If someone will have the same issue the quick fix could be:

<ion-list class="bg-transparent">
    <ion-item style="--background: transparent">

PS: I'm using Tailwind CSS. With basic CSS just use <ion-list style="background: transparent">

[Youka]

Bug still existent.

Alternative solution is setting the parent container background as ion-item background:

<ion-card>
  <ion-card-content>
    <ion-list>
      <ion-item>...</ion-item>
    </ion-list>
  </ion-card-content>
</ion-card>

ion-item {
  --background: var(--ion-card-background);
}