Change menu ion-backdrop opacity [inonic4]?

Hello,

I used ion-menu with type=“overlay” , now I need to change ion-backdrop opacity.

i’ve tried put below code in variables.scss, but doesn’t change

ion-menu {
  --ion-backdrop-color: rgba(255, 99, 165,.99) !important;
}

There is no such variable --ion-backdrop-color for backdrop color in the ion-menu component.
To change backdrop related CSS, you can use the shadow part property as below.

ion-menu::part(backdrop) {
    background: rgba(255, 99, 165, .99) !important;
}

Thanks , but doesn’t work … color and opacity are still default for ionic 4

Have you add this css in global.scss file and remove all other css?

Yeap, I’ve pasted only your code in global.scss , even tried paste in variables.scss. But doesn’t work, color and opacity are still default for Ionic.

it’s working fine while ionic serve in my code. Can you inspect in the browser, your css applied of backdrop or not?

I’ve pasted this code

ion-menu::part(backdrop) {
    background: rgba(255, 99, 165, .99) !important;
}

then inspect

<ion-backdrop class="menu-backdrop md backdrop-no-tappable hydrated show-backdrop" tabindex="-1"></ion-backdrop>

shows :

:host(.menu-type-overlay) .show-backdrop {
    display: block;
    cursor: pointer;
}
ion-backdrop {
    display: none;
    opacity: .01;
    z-index: -1;
}
:host(.backdrop-no-tappable) {
    cursor: auto;
}
:host {
    background-color: var(--ion-backdrop-color,#000);
}

BTW. I using Ionic 4