ixartz / SaaS-Boilerplate

🚀🎉📚 SaaS Boilerplate built with Next.js + Tailwind CSS + Shadcn UI + TypeScript. ⚡️ Full-stack React application with Auth, Multi-tenancy, Roles & Permissions, i18n, Landing Page, DB, Logging, Testing
https://react-saas.com/
MIT License
4.08k stars 571 forks source link

Support Dark mode #29

Closed thebergamo closed 1 month ago

thebergamo commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

ixartz commented 1 month ago

Here are some article explaining the issue:

You should be able to find the solution

ixartz commented 1 month ago

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