react-hot-toast icon indicating copy to clipboard operation
react-hot-toast copied to clipboard

Production color issue

Open websnooze opened this issue 1 year ago • 5 comments

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

Same if I use css classes instead of tailwind classes

websnooze avatar Jul 18 '24 10:07 websnooze

having the same issue

alexjidras avatar Jul 24 '24 09:07 alexjidras

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;

CodeMasterZeroOne avatar Sep 24 '24 08:09 CodeMasterZeroOne

same issue

kazza-dev avatar Nov 29 '24 05:11 kazza-dev

Can you please share a reproduction link (e.g. Codesandbox)?

timolins avatar Dec 21 '24 09:12 timolins

I have the same issue on my build. In development mode the styles apply correctly, but any build (staging, production..) keeps showing the old styles. I tried force refresh my css files with url changes, upgrade react-hot-toast to 2.5.2, nothing works.

Samnan avatar Jul 06 '25 16:07 Samnan