Styling ionic 2 toast

Answer 1

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.