Open websnooze opened 4 months ago
having the same issue
Hi I dont know if thats any help for you but in my nextjs project I created custom component and I'm changing the background and text color depending on the them, currently using dark theme and light theme here's how I use it:
'use client'
import { useTheme } from 'next-themes'; import { Toaster, toast } from 'react-hot-toast';
const MyHotToaster = () => { const { theme } = useTheme();
const getBackgroundColor = (type) => {
const lightThemeColors = {
// textColor: '#d4eefc',
textColor: '#333',
success: '#c0f0c8',
error: '#f0c0c0',
};
const darkThemeColors = {
textColor: '#fff',
success: '#4b6e54',
error: '#6e4b4b',
};
return theme === 'dark' ? darkThemeColors[type] : lightThemeColors[type];
};
return (
<Toaster position='top-center'
toastOptions={{
duration: 6000,
// This will dismiss all toasts before showing a new one
onShow: () => toast.dismiss(),
success: {
style: {
background: getBackgroundColor('success'),
color: getBackgroundColor('textColor'),
},
},
error: {
style: {
background: getBackgroundColor('error'),
color: getBackgroundColor('textColor'),
},
},
}}
/>
);
}; export default MyHotToaster;
same issue
Under dev environment, colors using tailwind config are working properly but not on production..
Same if I use css classes instead of tailwind classes