How to turn off dark mode in Tailwind v4?

[hunzzz1]

I use vite and vue3. In v3, you can turn it off in tailwind.config.js.
In v4, I tried many methods but none of them worked.

[wongjn]

Dark mode should generally be opt-in. I.e. you have to use dark: class name variants for dark mode to work. So to "turn off" dark mode, consider not using any dark: variants.

[hunzzz1]

Deleting the .dark variable is not a good solution, as it does not actually solve my problem. How can I switch modes when the device has dark mode enabled?

[wongjn]

Sorry, I'm not sure what you mean now. You say you want to disable dark mode, but now you do want to be able switch to dark mode? These seem contradictory. Perhaps provide an example of what you mean in v3 and I may be able to suggest the equivalent in v4.

[hunzzz1]

The problem I have is that when the device is in dark mode, the page automatically changes to dark mode. I want the dark mode not to follow the device theme.

[wongjn]

I see, thank you. See https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

[hunzzz1]

Thank you