How can I use the "dark:" variant?

[mdelez]

First off, thank you for making this library as we find it quite useful. Something I can't seem to get working is the "dark:" variant. Here's a screenshot of my html. I'm trying to change the background of the button if I am in dark mode. The parent div has the class name to switch the themes. I've tried many different things but I can't get it to work. Any help would be appreciated!

And here is my tailwind.config.js:

export default {
    content: ['./**/*.{js,ts,jsx,tsx,html}'],
    darkMode: ['selector', '[data-mode="dark"]'],
    important: true,
    theme: {
        extend: {
            maxWidth: {
                400: '400px'
            },
            padding: {
                '3px': '3px'
            },
            zIndex: {
                loading: zIndexes.loading
            }
        }
    },
    plugins: [
        createThemes({
            light: MyThemes.light,
            dark: MyThemes.dark
        })
    ],
    corePlugins: {
        preflight: false
    }
};

[mdelez]

I got it working by using the produceThemeVariant option to provide a different name other than "light" and "dark". Perhaps there is some conflict with me also using MUI theming in my app.

[L-Blondy]

I'm not familiar with MUI theming, but regarding tw-colors, you can simply remove the 'darkMode' option from your configuration, as tw-colors has built-in tools to manage it.

I'll close this issue for now