System dark mode not detected when using darkMode: "media" in tailwind.config.ts

IIsoPhoenix5/31/2023
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...
NARnot a robot5/31/2023
I would use next-themes I think your config only works if you add dark to the root of your project
IIsoPhoenix5/31/2023
@not a robot sounds good thank you so much! Where should I add dark (what file)?
NARnot a robot5/31/2023
The _app.tsx
IIsoPhoenix5/31/2023
Gotcha thanks!

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
What is wrapping a next server action in startTransition doing?This was brought up in another question. I came up with the following explination, however this is jCan I call tRPC procedure inside another procedure?Something like this: ```js export const mainRouter = createTRPCRouter({ create: privateProcedure Anyone know how to go about using Tailwind Animation to animate a linethrough on hover?Or framer motion.Task scheduler infra?I'm looking for something that can do the following (or do essentially the same thing). It feels likNeed suggestions for better infra CICDalright, so for this project i use docker containers for everything. my compose file has a redis cacConditional render, why can't it be done?I understand the reason this happens it that *something* doesn't understand that the Loader already do something once server action is completedIs there a way to achieve this (see title)? I’m using useTransition to start the action and need to How to use discord.js in Nextjs app dirHello, I am trying to use discord.js in my app but getting alot of errors, is this even possible?: `best way to fetch data in nextjsI was wondering what's the best way at the moment to query for external apis in NextJS? I know that @next/font turbo t3You might be using incompatible version of `@next/font` (13.4.4) and `next` (13.1.6). what version sTypescript issue causing trpc functions to not have type checkingHey, I'm in a create-t3-turbo app and have been banging my head against the wall trying to figure ouClerk middleware breaks Discord URL preview (embed)Anyone know how to fix this ...?