Hard to customize background color

[Milad]

Hello

I like this component because it's straight forward and easy to use. But the default colors don't match my theme.

I'm using this with Bulma, and I'd like to use Bulma's colors. So in my vue mixin I have:

    methods: {
        toasterError(errMessage) {
            this.$toaster.add(errMessage, {
                theme: 'notification is-danger',
                timeout: 2500
            });
        }
    }

Unfortunately, this color doesn't show because the css has default color in .v-toaster .v-toast. Is it possible to remove that default background color?

Regards

[paliari]

it's just you override the css, example:

.v-toaster .v-toast {
  background: <your defalt color>;
  border-color: <your defalt border color>;
}
.v-toaster .v-toast.v-toast-error {
  background: <your error color>;
  border-color: <your error border color>;
}

[Milad]

It's a dependency that I shouldn't change myself. And since I want to use colors from another framework, then the best option is to pass classes.

[paliari]

So it's simpler, it's just you use the method:

this.$toaster.add(this.message, {theme: 'your custom class'});

[Milad]

Thanks Paliari, this is exactly what I did.

        errorMsg(message) {
            this.$toaster.add(message, {
                theme: 'notification is-danger',
                2500
            });
        }

Check here the result.

The classes are: v-toast notification is-info v-toast-enter-to. The background-color in v-toast class is taking higher priority than the bg-color in is-info.

Now I could use !important to enforce the color of is-info but even this is coming from a 3rd-party dependency that I shouldn't change.

I believe the best option is to remove the bg-color from v-toast. Please correct me if I'm wrong.

[Milad]

This has been resolved by importing v-toaster css file before Bulam's.

import 'v-toaster/dist/v-toaster.css';
import 'bulma/bulma.sass';

Not the ideal solution, but this useful library is a little bit opinionated.

[Omni-Engineering]

Reach for unbiased purity 🪷