[SOLVED] Change the background color of the toast message Ionic 4

Issue

How can I change the background color of the toast message?

I have tried this: But no luck. Is that due to the shadow DOM effect?

variable.scss

--background:red;

global.scss

ion-toast>.toast-wrapper {
    background-color: red !important;
}

.ts

  async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom'
    });
    toast.present();
  }

Solution

You can set the color in the toast parameters:

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create({
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 });
 await toast.present();

Answered By – aamp

Answer Checked By – Senaida (BugsFixing Volunteer)