TTC

Theo's Typesafe Cult•3y 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

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"

darkMode: "media"

in

tailwind.config.ts

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

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!

globals.css1.65KB

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