Shadcn.io is not affiliated with official shadcn/ui
React useDarkMode Hook
React useDarkMode hook with system preference detection, localStorage persistence, and auto class toggle. TypeScript ready.
Add dark mode to any React app in one line. useDarkMode returns isDarkMode, toggle, enable, disable, and set controls. Automatically detects system preference via prefers-color-scheme, persists choice to localStorage, and applies the dark class to <html>. Syncs across tabs and responds to OS theme changes. Configurable storage key and class application. SSR safe with hydration handling. Works with Tailwind CSS dark mode, Next.js App Router, and any class-based theming system.
React useDarkMode Hook preview
Installation
Related Components
React useTernaryDarkMode Hook
Light/dark/system three-way toggle
React useMediaQuery Hook
Respond to CSS media queries
React useLocalStorage Hook
Persist state to localStorage
React useBoolean Hook
Boolean state with toggle helpers
React useToggle Hook
Toggle between custom values
React useIsClient Hook
Check if running on client
FAQ
Was this page helpful?
Sign in to leave feedback.