Changing the toast background colour in Ionic 4

Ionic Framework
1

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?

2

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

3

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

4

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;
}
2 Likes
5

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
7

it can be done by:

.toast-button{
color: red;
}
8

if I want to change .toast-wrapper

what i can do ??

and also
ionic 4 no app.css !

9

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/
10

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.

2 Likes
11

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

3 Likes
12

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;
}

13

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;
}

2 Likes
14

async presentToast(msg) {
const toast = await this.toastController.create({
message: msg,
showCloseButton: true,
duration: 3000,
position:ā€˜topā€™,
color:ā€˜dangerā€™,
closeButtonText: ā€˜OKā€™
});
toast.present();
}
}

donā€™t need to write to much code, just use color property to change background color.