Ionic 4: ion-item background transparent has no effect

Question

I know, there are plenty of topics like this out there, but unfortunately no approch works for me, where I can set the background color of an ion-item transparent.

sidemenu.component.ts

<ion-menu side="start" menuId="first" contentId="main" class="custom-bg">
    <ion-header>
        <ion-toolbar>
        <ion-title>{{env.appName}}</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-menu-toggle auto-hide="true">
                <ion-item *ngFor="let item of navItems" [routerLink]="item.url" routerDirection="forward">
                    <ion-icon [name]="item.icon" slot="start"></ion-icon>
                    <ion-label>{{item.title}}</ion-label>
                </ion-item>
            </ion-menu-toggle>
        </ion-list>
    </ion-content>
</ion-menu>

sidemenu.component.scss

ion-toolbar,
ion-content,
ion-item {
    --background: transparent;
    --color: var(--ion-color-primary-contrast);
}

.custom-bg {
    --background: red;
}

The result:

I'm out of ideas, what to try. Notice, that if I set the --background property for the ion-item to a regular color, everything works as expected. To me it looks like there is there is another element with a white background, not just the ion-item.

Note: I can reproduce this strange behaviour via DevTools on the official Ionic 4 docs, where adding a background on that examples ion-content won't shine through if you set an ion-items background to transparent there as well.

Anyone here has an idea, what's going on there?

Answer 1

Update:

Finally found the cause for that weird behaviour. Looks like the .list-ios on ion-list was the malefactor.

This did the trick for me:

ion-list {
    background: transparent;

    ion-item {
        --background: inherit;
    }
}

Answer 2

According to ionic official documentation : [https://ionicframework.com/docs/theming/colors][1]

Each color consists of the following properties: a base, contrast, shade, and tint. The base and contrast colors also require a rgb property which is the same color, just in rgb format. See The Alpha Problem for an explanation of why the rgb property is also needed.

To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called favorite, we can define the following variables:

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

Then, create a new class that uses these CSS variables. The class must be written in the format .ion-color-{COLOR} where {COLOR} is the name of the color to add:

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

After the class is added, the color can be used on any Ionic component that supports the color property. An example of using the favorite color on an Ionic button is below.

<ion-button color="favorite">Favorite</ion-button>

You can create similar custom color for transparent