useTernaryDarkMode
React hook for managing ternary dark mode (system, dark, light) with local storage support and system preference detection.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-ternary-dark-mode.json
npx shadcn@latest add https://www.shadcn.io/registry/use-ternary-dark-mode.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-ternary-dark-mode.json
bunx shadcn@latest add https://www.shadcn.io/registry/use-ternary-dark-mode.json
Features
- Three-mode support - light, dark, and system preference modes
- Local storage persistence - Remembers user preference across sessions
- System preference detection - Automatically detects OS dark mode setting
- Type safety - Full TypeScript support with proper type definitions
- SSR compatible - Optional initialization for server-side rendering
- Customizable - Custom local storage key and default values
Usage
import { useTernaryDarkMode } from "@/hooks/use-ternary-dark-mode"
function ThemeToggle() {
const {
isDarkMode,
ternaryDarkMode,
setTernaryDarkMode,
toggleTernaryDarkMode,
} = useTernaryDarkMode()
return (
<div>
<p>Current theme: {isDarkMode ? "dark" : "light"}</p>
<p>Mode: {ternaryDarkMode}</p>
<button onClick={toggleTernaryDarkMode}>
Toggle from {ternaryDarkMode}
</button>
</div>
)
}
API Reference
useTernaryDarkMode
Parameter | Type | Default | Description |
---|---|---|---|
options | TernaryDarkModeOptions | {} | Configuration options for the hook |
TernaryDarkModeOptions
Property | Type | Default | Description |
---|---|---|---|
defaultValue | TernaryDarkMode | "system" | Initial dark mode value |
localStorageKey | string | "use-ternary-dark-mode" | Key for local storage persistence |
initializeWithValue | boolean | true | Whether to initialize with stored value (set to false for SSR) |
Return Object
Property | Type | Description |
---|---|---|
isDarkMode | boolean | Current computed dark mode state |
ternaryDarkMode | TernaryDarkMode | Current ternary mode value |
setTernaryDarkMode | Dispatch<SetStateAction<TernaryDarkMode>> | Function to set the ternary mode |
toggleTernaryDarkMode | () => void | Function to cycle through the three modes |
TernaryDarkMode
type TernaryDarkMode = "system" | "dark" | "light"
Usage Examples
Basic Usage
const { isDarkMode, ternaryDarkMode, toggleTernaryDarkMode } = useTernaryDarkMode()
With Custom Default
const darkModeHook = useTernaryDarkMode({
defaultValue: "dark",
localStorageKey: "my-app-theme"
})
SSR Compatible
const darkModeHook = useTernaryDarkMode({
initializeWithValue: false
})
Manual Mode Selection
const { ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode()
// Set specific mode
setTernaryDarkMode("dark")
setTernaryDarkMode("light")
setTernaryDarkMode("system")
Implementation Details
- Uses
useMediaQuery
to detect system color scheme preference - Uses
useLocalStorage
for persistent theme storage - The
isDarkMode
value is computed based on the ternary mode and system preference - When mode is "system",
isDarkMode
follows the OS preference toggleTernaryDarkMode
cycles through: light → system → dark → light- All state changes are persisted to local storage automatically
useStep
Custom React hook that manages and navigates between steps in a multi-step process. Perfect for wizards, onboarding flows, and step-by-step forms with Next.js integration and TypeScript support.
useTimeout
React hook for declarative setTimeout management with automatic cleanup and dynamic delay control. Perfect for React applications requiring timed actions with Next.js integration and TypeScript support.