Shadcn.io is not affiliated with official shadcn/ui
React useTernaryDarkMode Hook
React useTernaryDarkMode hook for light/dark/system theme modes. Persists preference, respects OS setting. TypeScript ready.
Implement proper dark mode with system preference support. useTernaryDarkMode manages three states: light, dark, and system—the gold standard for theme switching. System mode follows OS prefers-color-scheme and updates live when user changes system settings. Manual light/dark overrides system preference. Persists to localStorage. Returns isDarkMode boolean for conditional styling, current mode string, setter for direct control, and toggle for cycling through modes. All preferences sync across tabs. Perfect for theme switchers, settings pages, or anywhere users should choose between explicit themes or following system preference. Works with Next.js, Tailwind dark mode.
React useTernaryDarkMode Hook preview
Installation
Related Components
React useDarkMode Hook
Simple boolean dark mode
React useMediaQuery Hook
Detect system preferences
React useLocalStorage Hook
Persist state to storage
React useToggle Hook
Toggle between values
React useIsClient Hook
Check if running on client
React useIsomorphicLayoutEffect Hook
SSR-safe layout effect
FAQ
Was this page helpful?
Sign in to leave feedback.