Theme creation

Create a CSS class with the desired custom properties.

.custom-theme {
  --confirm-toast-bg: aquamarine;
  --confirm-toast-box-shadow: 0 0 1px 4px purple;
  --confirm-toast-text-color: purple;
  --confirm-toast-icon-color: black;
  --confirm-toast-btn-yes-bg: green;
  --confirm-toast-btn-yes-color: lightgreen;
  --confirm-toast-btn-no-bg: yellow;
  --confirm-toast-btn-no-color: black;
  --confirm-toast-btn-hover: brightness(0.9);
  --confirm-toast-btn-yes-focus: 2px solid orange;
  --confirm-toast-btn-no-focus: 2px solid orange;
  --confirm-toast-btn-close-focus: 2px solid red;
  --confirm-toast-btn-no-disabled: opacity(0.6);
  --confirm-toast-btn-yes-disabled: opacity(0.6);
}

Then, import the CSS file and apply the class name using the className property.

import { useState } from 'react'
import { ConfirmToast } from 'react-confirm-toast'
import './custom.css'

export default function ConfirmToastComposition() {
  const [show, setShow] = useState(false)

  function myFunction() {
    alert('Done!')
  }

  return (
    <>
      <button
        onClick={() => {
          setShow(true)
          console.log('Click')
        }}
      >
        New theme
      </button>
      <ConfirmToast
        className='custom-theme'
        customFunction={myFunction}
        setShowConfirmToast={setShow}
        showConfirmToast={show}
      />
    </>
  )
}