System dark mode not detected when using darkMode: "media" in tailwind.config.ts
Hello! I am building a simple starter project using Tailwind and
shadcn-ui components. I want the webapp to display dark mode/light mode depending on the system preference. My understanding from this documentation (https://tailwindcss.com/docs/dark-mode) is that if I set darkMode: "media" in tailwind.config.ts, then the app will automatically detect the system preference of dark mode/light mode. However, despite this modification there is no effect in the webapp when switching dark/light mode on my OS.
Am I missing some functionality here? All I've done is install shadcn-ui components with the CLI and use them to build a simple page layout (with some help from the examples in the documentation).
The repo link is: https://github.com/hcs-t4sg/starter-project-2023-core
I'll also attach my config and global CSS files below.
Thank you!Dark Mode - Tailwind CSS
Using Tailwind CSS to style your site in dark mode.
GitHub
GitHub - hcs-t4sg/starter-project-2023-core: 2023 starter project f...
2023 starter project for web dev teams. Stack includes TailwindCSS, Next.js, Supabase, Prisma, and tRPC. - GitHub - hcs-t4sg/starter-project-2023-core: 2023 starter project for web dev teams. Stack...
4 Replies
I would use
next-themes
I think your config only works if you add dark to the root of your project@not a robot sounds good thank you so much! Where should I add
dark (what file)?The
_app.tsxGotcha thanks!