Customization

[synpse]

How can I customize a theme? I can probably override existing themes, but can I create a new one? If yes, then how?

[victor-lillo]

Hello!

Just create a CSS class and pass it through childrenClassName. There, you can override the custom properties to customize the theme.

By the way, I'm working on new version of this package, feel free to suggest features if you want :)

Thanks!

[synpse]

I'm a little bit confused on how to do it. Could you give me an example please? Thank you for your support!

[victor-lillo]

Sure, @synpse!

Follow this steps:

1. Create a CSS class in one of your stylesheets with the custom theme you want. For example:

.custom-confirm-toast-theme {
  --confirm-toast-bg: aquamarine;
  --confirm-toast-msg-color: purple;
  --confirm-toast-icon-color: black;
  --confirm-toast-btn-yes-color: lightgreen;
  --confirm-toast-btn-no-color: pink;
  --confirm-toast-btn-yes-bg: green;
  --confirm-toast-btn-no-bg: crimson;
  --confirm-toast-btn-hover: 0.9;
}

2. Pass this class name to the childrenClassname property, like this:

<ConfirmToast
  childrenClassName='custom-confirm-toast-theme'
  // Rest of the props you need
>
  <button>Your component</button>
</ConfirmToast>

And with this you are done!