Ionic 4 How to set the default item-background?

I have to themes. The default light and a custom dark.


--ion-item-background: #ffffff;


--ion-item-background: #1a1b1e;

The problem ist that this blocks the color of card.
If ion-item-background is set in :root or .dark of variables.scss, the color attribut of ion-card does not work correctly anymore.


<ion-card color="danger">
    Hello World

does not not work if the variable ion-item-background is set. In this case it looks like empty:

If I remove the variable I get this as expected and also wanted with the variable:

Why use the variable --ion-item-background?
Well, it looks better. I use --ion-background-color with light gray and want default color of items white.
I expected that the ion-item-background is a default color and should not dominate the color atttibute.

How to set the default color? Or is this a bug?

Ionic: 4.7.1

Try this…


Thanks but nope. Does not work. Demo of my Issue Btw. I don’t want to style it in a “dirty” way. I want the official way. I know how to force stylings on an element.

Btw. a working workaround is e.g. in scss:

.my-card {
  --background: var(--ion-color-danger);

See demo

But I want the official way color attribute. :baby: I think it’s a bug. (I have already created a ticket on Github.)

Update: Yes, officially it is a bug. See Github

Put in global.css