Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Items background colour in Card when active Dark theme #30146

Open
3 tasks done
Uolsen opened this issue Jan 22, 2025 · 1 comment
Open
3 tasks done

bug: Items background colour in Card when active Dark theme #30146

Uolsen opened this issue Jan 22, 2025 · 1 comment
Labels

Comments

@Uolsen
Copy link

Uolsen commented Jan 22, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

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

Image

Expected Behavior

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

Image

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

@ionitron-bot ionitron-bot bot added the triage label Jan 22, 2025
@Uolsen Uolsen changed the title bug: bug: Items background colour in Card when active Dark theme Jan 22, 2025
@Uolsen
Copy link
Author

Uolsen commented Jan 22, 2025

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">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant