Customization - Githubissues

synpse commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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!

victor-lillo / react-confirm-toast

Customization #2