nextjs-starter-medusa: Dark mode incompatibility
With tailwindcss>3.3.3
, the design breaks during active dark mode.
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 15
With tailwindcss>3.3.3
, the design breaks during active dark mode.
I’ve got the same problem even with 2.4.1. And I also don’t think it’s any
dark:
leftovers, as there are no dark: classes in the code.However, there is a layout.css file being generated, that sets the color variables based on the css
prefers-color-scheme: dark
setting.It’s because the ui-preset tailwind plugin is looking at the config to see, if the
darkMode: 'class'
property is set in thetailwind.config.js
. If not (as it is by default), it overrides the color variables based on the system color scheme.So you can fix it by explicitly saying the dark-mode isn’t set based on the system:
I could also create a PR to make this the default behaviour for freshly created nextjs-starters, if that’s wanted
It’s not a priority as of now, but we might add it later. Feel free to add it as an idea to GH discussions!