Change menu ion-backdrop opacity [inonic4]?

Ionic Framework
1

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;
}
2

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;
}
3

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

4

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

5

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.

6

image
image455×806 19.9 KB

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

7

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

8

CSS Shadow Parts is only available on Ionic v5. You will notice the difference in the UI components documentation when you switch between the framework releases in docs page

v5 docs: ion-menu: Ionic Framework API Docs
v4 docs: ion-menu - Ionic Documentation

So, in order to change the menu backdrop color you have to migrate your application code to Ionic v5