Support Dark mode

[thebergamo]

This project is really amazing and it's helping me a bunch to get started with some ideas!
I was just wondering if the dark mode is not supported out of the box to support the pro version or you would be open once I manage to fix it to file a PR with such support?

[ixartz]

Hi @thebergamo,

Thank you so much for your comment and thank you for your help. All support is welcomed.

Yes, unfortunately, the dark mode isn't supported out of the box yet but I'm planning to do it. Because the project is using Shadcn UI, it shouldn't be a big issue to implement it.
If you manage to implement a dark mode, I would love to review your PR and merge it if it's working perfectly.

Again thank you so much.

[thebergamo]

I kind of manage already to do it, but there is something that bugs me still.
The only way I manage to support it is using @media (prefers-color-scheme: dark) rather than the regular .dark from out of the box Shadcn UI. If that's fine for you I can do the PR for testing :)

[ixartz]

Any reason it didn't work with the regular .dark from out of the box Shadcn UI? It would be great to keep the same logic as the Shadcn UI. What is the blocker to use the .dark feature from Shadcn UI?

[thebergamo]

I tried to understand, but didn't managed to grasp the why. In general in all my project it usually works fine, but for some reason in this one the .dark from the global.css it got striped and wasn't in the layout.css file

[ixartz]

I won't be surprise I misconfigured somewhere, it's the first time I'm playing with Shadcn UI.

[ixartz]

Here are some article explaining the issue:

• Dark mode not working because of @layer base, demo repo provided shadcn-ui/ui#313
• dark mode not working shadcn-ui/ui#278
• .dark section not included in tailwind output shadcn-ui/ui#515

You should be able to find the solution

[ixartz]

Just implement and release a dark mode, you can find a live demo at: https://pro-demo.nextjs-boilerplate.com