Change color of toast message in Ionic 4?

Question

This is the toast I have created:

const toast = await this.toast.create({
        showCloseButton: true,
        message: 'Please Fill Data',
        duration: 30000,
        position: 'bottom',
        cssClass:'iontoast'
      });
      toast.present();

Styles which I applied to it:

iontoast{
    .toast-message{
        --background:white !important;
        --color:black !important;
    }
    .toast-container
    {
        --background:white !important;
        --color:black !important;
    }
}

I also tried this:

ion-toast{
 --background:white !important;
 --color:black !important;
}

Both of them didn't worked for me. How should I apply it to both android and ios? Thanks!

Answer 1

1. color property can be passed as options, look below

await this.toastController.create({
            message: 'Hello World',
            color: 'danger',
            duration: 2000,
            position: 'top',
            showCloseButton: true,
            closeButtonText: 'Close'
        });

you can pass any other color as well like primary, secondary, success, etc which are provided in the theme/variable.scss file.

2. Using your custom css class you need to prepend ion-toast to your custom css class, look below

ion-toast.my_custom_class {
      // Css rules or using css custom properties
}

and just pass your custom class name to toast controller

Answer 2

to change the toast button color, the solution which worked for me was:

let toast = this.toastCtrl.create({
  message: 'your toast message text',
  duration: 3000,
  cssClass: 'toast-error',
  showCloseButton: true,
  closeButtonText: 'Undo'
});

and in my css file:

page-my.page.scss.name {
        // my regular css code
}

.toast-error .button-inner {
    color: color($colors, danger);
}

if you want also to change the background color of your toast message, add the follow code in your scss file:

.toast-container {
    background-color: #a5a0a0;
}