timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.85k stars 331 forks source link

Production color issue #366

Open websnooze opened 4 months ago

websnooze commented 4 months ago

Under dev environment, colors using tailwind config are working properly but not on production..

Same if I use css classes instead of tailwind classes

alexjidras commented 4 months ago

having the same issue

CodeMasterZeroOne commented 2 months ago

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: Screenshot 2024-09-24 at 9 13 21 AM

'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;

kevingjs commented 1 hour ago

same issue