SaaS-Boilerplate icon indicating copy to clipboard operation
SaaS-Boilerplate copied to clipboard

Support Dark mode

Open thebergamo opened this issue 1 year ago • 6 comments

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?

thebergamo avatar Aug 20 '24 19:08 thebergamo

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.

ixartz avatar Aug 20 '24 19:08 ixartz

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 :)

thebergamo avatar Aug 20 '24 19:08 thebergamo

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?

ixartz avatar Aug 20 '24 20:08 ixartz

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

thebergamo avatar Aug 20 '24 20:08 thebergamo

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

ixartz avatar Aug 20 '24 21:08 ixartz

Here are some article explaining the issue:

  • https://github.com/shadcn-ui/ui/issues/313
  • https://github.com/shadcn-ui/ui/issues/278
  • https://github.com/shadcn-ui/ui/issues/515

You should be able to find the solution

ixartz avatar Oct 11 '24 21:10 ixartz

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

ixartz avatar Oct 15 '24 17:10 ixartz