ardeora/solid-toast

Customize toast

jacksonsophat opened this issue · 3 comments

jacksonsophat commented

This isn't an issue, just a question.

How can I customize a toast globally? For example, change the background color that can work across the app?

Thank you!

ardeora commented

Hello! https://github.com/ardeora/solid-toast#available-options-1 Does this help? You can set background color of the toast globally on the <Toaster /> component. Or do you mean when using toast.custom()?

jacksonsophat commented

I don't think that would work the way I want it. I want to have border red for error and green for success globally.
Hope I make sense.

gxanshu commented

as i noticed by inspecting the the documentation site i realized that you can get your desirable result with global CSS customization here is a example bellow.

i noticed that the div of toast uses the sldt-active class so we can selected toast with following code.

/** just a example **/
.sldt-active > div {
  border-color: red;
  border-width: 2px;
}