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


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?




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


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

enter image description here


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)

Leave a Reply

Your email address will not be published. Required fields are marked *