TTC
Theo's Typesafe Cult•13mo ago
IsoPhoenix

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...

tailwind.config.ts

globals.css

4 Replies
not a robot
not a robot•13mo ago
I would use next-themes I think your config only works if you add dark to the root of your project
IsoPhoenix
IsoPhoenix•13mo ago
@not a robot sounds good thank you so much! Where should I add dark (what file)?
not a robot
not a robot•13mo ago
The _app.tsx
IsoPhoenix
IsoPhoenix•13mo ago
Gotcha thanks!
Want results from more Discord servers?
Add your server
More 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 s