How to change the css for Toast in Ionic 2

Ionic Framework ionic-v3
1

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

  .toast-message{
    background: white;
  }

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

2

the class for toast styles is toast-container

.toast-container{
background-color: white;
}

this worked for me

5 Likes
3

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:

4

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.

5

@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);
}
9 Likes
6

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

Thanks!

1 Like
7

Put these in your project theme/variable.css

Example:
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
8

for my works fine like this:

.toast-container{
background-color: color($colors,“primary”);
text-align: center;
}

tnks a lot.