Change ion-backdrop opacity? - css

Question

I'm trying to change the opacity of my ion-backdrop from 0.08 to 0.33.
I've tried:
ion-backdrop {
opacity: 0.33 !important;
}
and setting $popover-ios-background: rgba(0, 0, 0, 0.33);.
Setting the value on ion-backdrop does work but since it's important, it doesn't animate the fade out.
How can I change the opacity of the backdrop?

Answer 1

I know I am a bit late to this party, but now with Ionic 5, you have a CSS selector that will do the job for you. That is mentioned in their documentation as well.
So basically all you could do is, initialize the modal and style it in your SCSS file.
This is my component.ts file:
import { Component } from '#angular/core';
import { ModalController } from '#ionic/angular';
// ModalComponent is just a normal angular component, your path may vary
import { ModalComponent } from '../../modals/modal.component';
#Component({
selector: 'some-component',
templateUrl: './some-component.component.html',
styleUrls: ['./some-component.component.scss']
})
export class SomeComponentComponent {
constructor(
private modalController: ModalController,
) { }
async presentModal() {
const modal = await this.modalController.create({
component: ModalComponent,
cssClass: 'modal-class'
});
return await modal.present();
}
}
and my component.scss file:
.modal-class {
ion-backdrop {
--backdrop-opacity: 0.33;
}
}

Answer 2

I’ve do it using the cssClass property in alertController (Ionic 4)
async alertError(message: string) {
const alert = await this.alertController.create({
cssClass: 'alertClass',
animated: true,
header: 'Error',
message,
buttons: ['OK']
});
await alert.present();
}
ion-alert {
&.alertClass{
background: rgb(0,0,0,.8);
}
}

Answer 3

I am guessing that this ion-backdrop question it's related with the Ionic Alert Controller. If that is the case than you need to apply CSS inside the global.scss (Ionic 3) file or theme\variable.scss (Ionic 4/5). This is required because ion-backdrop lives in the app as an Ionic Global Component.
Therefore find the mentioned file inside your Ionic project. It's usually in this directory app > src > global.scss.
Now let's suppose that we have this Alert Controller instanciated in some page class.
...
async serviceErrorAlert() {
const alert = await this.alertController.create({
cssClass: 'try-again-alert',
...
});
await alert.present();
}
...
As you can see this Alert Controller haves a CSS class of try-again-alert.
So to add all custom CSS that you want just go the style file and add your own style.
global.scss (Ionic 3):
.try-again-alert {
--background: rgba(55, 67, 77, 0.9);
}
theme\variable.scss (Ionic 4/5):
I strongly recommend you to use CSS background attribute and rgba() property. With this approach you can now choose the color that you want (first three numbers) and the opacity of the color (fourth number).

Answer 4

There is currently an open issue about this in Ionic's GitHub. The only workaround listed there that doesn't break the animation is long and complex - too much to list here. A direct link to the solution: https://github.com/ionic-team/ionic/issues/9105#issuecomment-375010398

Answer 5

I only managed to do it in Ionic 5 by using background: rgba() property with a desired alpha value.
Page where modal is called
openModal(): Promise<void> {
return this.modalCtrl.create({
component: ModalPage,
backdropDismiss: true,
cssClass: 'custom-class'
}).then(modal => {
modal.present();
});
}
app/theme/variable.css
.custom-class {
background: rgba(0,0,0,0.8); /*black with 0.8 opacity*/
}