Dark mode incompatibility about nextjs-starter-medusa HOT 15 CLOSED

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 the tailwind.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:

module.exports = {
  darkMode: 'class',
  presets: [require("@medusajs/ui-preset")],
  …
}

I could also create a PR to make this the default behaviour for freshly created nextjs-starters, if that’s wanted

from nextjs-starter-medusa.

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!

from nextjs-starter-medusa.

I got the same problem, any update ?

from nextjs-starter-medusa.

Hey guys @xyzones @fuse-thanakorn,

I think there was a bug in Medusa UI that caused some dark mode issues. Should be solved in later versions. Could you try updating Medusa UI to >2.4.1?
"@medusajs/ui": "^2.4.1"

from nextjs-starter-medusa.

@VariableVic the dark:... is missing from lot of places. so I don't think was only a @medusajs/ui issue

I have update the package and it is still not working.

from nextjs-starter-medusa.

The Starter doesn't support dark mode, so any dark: classes present are leftovers from an early version.

I can't replicate the issue with the package versions you mentioned. What browser are you using?

from nextjs-starter-medusa.

@VariableVic For me Safari and Chrome still got that same problem.

from nextjs-starter-medusa.

@VariableVic this is what we say that due to some leftover or bugs the design breaks in dark mode. Safari, chrome same issue

from nextjs-starter-medusa.

For me this issue happened when I updated tailwind above 3.3.3 as the issue description says

from nextjs-starter-medusa.

@ericwaetke great catch, I'd happily accept that PR!

from nextjs-starter-medusa.

I don't think you understand the problem. We need to darkMode and it is simply not working.

from nextjs-starter-medusa.

We need to darkMode and it is simply not working.

What do you mean exactly? Are you trying to add dark: classes and they aren't picking up? Please elaborate on what you're trying to achieve and what is not working as expected.

from nextjs-starter-medusa.

@VariableVic just look the original post pictures with darkmode the whole store is unusable

from nextjs-starter-medusa.

Like I said, this Starter doesn't support dark mode out of the box. It's light mode only. There's 2 things you can do here:

1. Implement @ericwaetke's fix to prevent the store from switching to dark mode entirely. This will enforce light mode regardless of the user settings.
2. Or, if you want to use dark mode: implement it yourself. You can use Medusa UI classes like bg-ui-bg-base - they will switch based on the user system setting. As you can see in your screenshot, some components are already using these, and thus reacting to dark mode.

from nextjs-starter-medusa.

@VariableVic so no intention to make this available? I have solved this went I opened, so is not really affecting me, however this would be surely much appreciated by the community ;)

from nextjs-starter-medusa.