React Dark Mode Toggle

import { useState, useEffect } from class=class="text-emerald-400">"text-emerald-400">'react'

function useDarkMode(): [boolean, () => void] {
  const [isDark, setIsDark] = useState(() => {
    if (typeof window === class=class="text-emerald-400">"text-emerald-400">'undefined') return false
    const saved = localStorage.getItem(class=class="text-emerald-400">"text-emerald-400">'theme')
    if (saved) return saved === class=class="text-emerald-400">"text-emerald-400">'dark'
    return window.matchMedia(class=class="text-emerald-400">"text-emerald-400">'(prefers-color-scheme: dark)').matches
  })

  useEffect(() => {
    const root = document.documentElement
    if (isDark) {
      root.classList.add(class=class="text-emerald-400">"text-emerald-400">'dark')
      localStorage.setItem(class=class="text-emerald-400">"text-emerald-400">'theme', class=class="text-emerald-400">"text-emerald-400">'dark')
    } else {
      root.classList.remove(class=class="text-emerald-400">"text-emerald-400">'dark')
      localStorage.setItem(class=class="text-emerald-400">"text-emerald-400">'theme', class=class="text-emerald-400">"text-emerald-400">'light')
    }
  }, [isDark])

  const toggle = () => setIsDark(prev => !prev)

  return [isDark, toggle]
}

export default useDarkMode