[Answered] Toast custom color

Is there an “official” way to have, for example a bottom Toast with red background and white text ? I was able to do that in v1, but can’t find it on v2.

Quick Answer after help : cssClass parameter of the toast create method.

You can add extra class to toast element in cssClass parameter. And based on this class add required styles in your app’s css file

Thanks. I tried, without effect for the background. I would like for some toast a red background (not black).

I created a “toast_red” css class and declare it in toast parameter, but, toast stay black (apparently inherited from black theme)

In capture you can see in Chrome, background-color is ignored (grayed).

‘closeTimeout’: 44000,
‘cssClass’ : ‘toast_red’

.toast_red {

background-color: #d43535;
color : white;


Have you tried adding !important to the rule:
background-color: #d43535 !important;

Edit: Works for me (md)!

1 Like

Yes thanks. It don’t work too. Toast stay black.

Works for me without problems:

Thanks everyone. It works.

Stupid mistake about a @media section I was writing in…

But, Thanks for the “cssClass” parameter tips. That is what I needed.

1 Like

For VueJS developers, be sure that the css is set in a ‘non-scoped’ ‘style’ tag. Otherwise, the css mangling will make is useless.

  .auth-error {
    background-color: #ff3b30 !important;

  .auth-forgot {
    background-color: #4cd964 !important;
1 Like