How to change the css for Toast in Ionic 2

Hi. I tried changing the css property of toast message in my scss as below.

    background: white;

But i couldn’t see any changes getting reflected. Please let me know how to change the css property for toast

the class for toast styles is toast-container

background-color: white;

this worked for me


Thanks for your reply @piyukore. I got it by editing the .toast-message class itself. Due to some blender mistake i didnt get. Thanks for your valuable time. :slight_smile:

For some reason, nothing I do changes the css of the toast. I even tried the cssClass parameter on creation of the toast, but that doesn’t show up either when I inspect it.

@heykamok I use toast with the cssClass with values of success or error, for example. With these classes (it’s easy to customize other classes), the following worked for me:

ion-toast.success .toast-wrapper {
	background: green;

ion-toast.error .toast-wrapper {
	background: rgb(209, 71, 71);

Hello. Thanks for replying. I figured it out by using cssClass. Turns out, in the scss file where you declare the css for the class you put in cssClass, you have to put it OUTSIDE of the page’s selector in order to work. I also had to make it target the next div, using something like > div { color: red; }.


1 Like

Put these in your project theme/variable.css

For Android:
$toast-md-background: red;
$toast-md-title-color: white;

For iOS:
$toast-ios-background: red;
$toast-ios-title-color: white;

ref: check sass variables in below link

1 Like

for my works fine like this:

background-color: color($colors,“primary”);
text-align: center;

tnks a lot.