Join our Discord Community

useTernaryDarkMode

React hook for managing ternary dark mode (system, dark, light) with local storage support and system preference detection.

Loading component...

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

ParameterTypeDefaultDescription
optionsTernaryDarkModeOptions{}Configuration options for the hook

TernaryDarkModeOptions

PropertyTypeDefaultDescription
defaultValueTernaryDarkMode"system"Initial dark mode value
localStorageKeystring"use-ternary-dark-mode"Key for local storage persistence
initializeWithValuebooleantrueWhether to initialize with stored value (set to false for SSR)

Return Object

PropertyTypeDescription
isDarkModebooleanCurrent computed dark mode state
ternaryDarkModeTernaryDarkModeCurrent ternary mode value
setTernaryDarkModeDispatch<SetStateAction<TernaryDarkMode>>Function to set the ternary mode
toggleTernaryDarkMode() => voidFunction 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