'React hot toast background theme depending on selected DaisyUI theme

I have DaisyUI Themes in my project which sets the data-theme="" of the tag to it's selected theme. More info on this link https://daisyui.com/docs/themes/

I'm trying to make react-hot-toast notifications change their styling depending on which theme is selected like the whole app is doing. The problem is that I don't find a way to style their default toast messages dynamically depending on which theme is selected I would expect something like that:

Adding className: 'bg-primary' as the default background from DaisyUI theme. The only thing that works for me is "hardcoding" background colors in style object.

<Toaster
  toastOptions={{
    className: 'bg-primary',
    style: {
      border: '1px solid #713200',
      padding: '16px',
      color: '#713200',
    },
  }}
/>

Does anyone know how to dynamically add background color to toast notifications depending on the selected DaisyUI Theme?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React hot toast background theme depending on selected DaisyUI theme

Sources

Related Questions