Styling ionic 2 toast

Answer 1

You should be able to change any of the message styling in the css using .toast-message selector:

.toast-message { 
    font-family: Helvetica,
    color: red
}

Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.

Answer 2

I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

post-list.scss like this

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}      

Answer 3

You can accomplish, however you need to modify the toast component template itself.

Via explorer: \node_modules\ionic-angular\components\toast\toast.js

Change line 194 (template): {{d.message}} to <div [innerHTML]='d.message'></div>

Answer 4

Change toast background color and opacity:

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

and add app.scss:

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

It's used with .toast-message

Answer 5

If you define your own css class in app.scss (not in page.scss) you can style it with .toast-wrapper and .toast.message No need to use > div{

Example:

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

in theme/variables.scss you can make a default

Example (red and little transparent):

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);

Answer 6

I was able to achieve a toaster color change by adding a custom class on the toaster create

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...

You can override the style default by overriding the main toaster variables in the theme/variables.scss file.

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.