Changing the toast background colour in Ionic 4

Hello there,

I am struggling with changing the background colour of toasts (and popovers) in ionic 4.

A component contains the following code:

type or paste code here  
async presentToast() {
    const toast = await this.toastCtrl.create({
      message: "hi there"
      cssClass: "toast-scheme ",
      showCloseButton: true,
      closeButtonText: "OK",
      position: 'top'
    });
    toast.present();
  }

The toast-scheme class atm moment looks like this:

.toast-scheme {
    .toast-message { 
        background: white !important ;
        color: red!important ;
    }
    .toast-container {
        background: white !important ;
        color: red!important ;

    }
    .toast-md {
        background: white !important ;
        color: red!important ;

    }
    background: white  !important ;
    color: red!important ;

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

I have even tried the following:

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

toast-container {
    background: white !important ;
    color: red!important ;
}
.toast-container {
    background: white !important ;
    color: red!important ;
}
ion-toast {border-radius: 0.65rem !important; background: white !important } 

.toast-md {
    background: white !important ;
    color: red!important ;
} 

toast-md {
    background: white !important ;
    color: red!important ;
} 

Which css class would I need to overwrite?

Do you want to change the color of the toast??

I would like to change the background colour of the toast and the colour of the text.

If I had to do that, then I would have done the changes in app.scss.

.toast-container{
    background:yellow;
}

.toast-md .toast-message{
    color: red;
}
1 Like

Thank you that worked. I added the code in /theme/variable.scss.

Is there any chance you could tell me how to manipulate the colour of the close button as well?
That is to say turn the close button text to red as well?

At the moment the toast button seems to be have the following classes:

<ion-button ion-activable="" class="toast-button button button-md button-clear button-clear-md ion-color-light hydrated" fill="clear">OK</ion-button>

Where would I specify that I would like instead of the ion-color-light style class to use the ion-style-dark?

1 Like

it can be done by:

.toast-button{
color: red;
}

if I want to change .toast-wrapper

what i can do ??

and also
ionic 4 no app.css !

you can update the variables.scss with your

.toast-wrapper{
}

and cssClass in your .ts file …

OR the following suggested to me by @joabchua and @Fares95 the following :

https://www.joshmorony.com/create-a-custom-modal-page-transition-animation-in-ionic/

In my case, It is not working. I copied (one-by-one) suggested styles in global.css, variable.css, app.css - nothing works. Is it due to Ionic 4 ? - Ionic 4 is wasting time.

3 Likes

Agreed. Developing 20% of the time, the other 80% is trying to figure out how Ionic works in the background.
I am considering switching to other framework

1 Like

type or paste code here
async presentToast() {
const toast = await this.toastCtrl.create({
message: “hi there”
cssClass: "toast-scheme ",
showCloseButton: true,
closeButtonText: “OK”,
position: ‘top’
});
toast.present();
}
//SCSS
.toast-scheme
{
–background:red;
}

type or paste code here
async presentToast() {
const toast = await this.toastCtrl.create({
message: “hi there”
cssClass: "toast-scheme ",
showCloseButton: true,
closeButtonText: “OK”,
position: ‘top’
});
toast.present();
}
//SCSS
.toast-scheme
{
–background:red;
}