Ionic 4 How to set the default item-background?

Ionic Framework
1

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

light:

--ion-item-background: #ffffff;

dark:

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

e.g.

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

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

63780281-24fc6780-c8e8-11e9-95e0-1073e05b3b3f.png952×60 614 Bytes

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

63780823-021e8300-c8e9-11e9-8a1d-37d9d43a2e06.png949×61 973 Bytes

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

2

Try this…

style="background-color:var(--ion-your-color-defined)

3

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

4

Hello,
Put in global.css