[Answered] Toast custom color

Questions
1

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.

2

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

3

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).

toast
toast.JPG1157×443 38.4 KB

app.toast.create({
‘text’:ia.labels.fr(msgcode),
‘closeTimeout’: 44000,
‘cssClass’ : ‘toast_red’
});

.toast_red {

background-color: #d43535;
color : white;

}

4

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

Edit: Works for me (md)!

1 Like
5

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

6

Works for me without problems:

toast
toast.png2094×1408 543 KB

7

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
8

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

<style>
  .auth-error {
    background-color: #ff3b30 !important;
  }

  .auth-forgot {
    background-color: #4cd964 !important;
  }
</style>
1 Like