{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-appearance",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/new-york-v4/hooks/use-appearance.tsx",
      "content": "import { useSyncExternalStore } from \"react\";\n\nexport type ResolvedAppearance = \"light\" | \"dark\";\nexport type Appearance = ResolvedAppearance | \"system\";\n\nexport type UseAppearanceReturn = {\n    readonly appearance: Appearance;\n    readonly resolvedAppearance: ResolvedAppearance;\n    readonly updateAppearance: (mode: Appearance) => void;\n};\n\nconst listeners = new Set<() => void>();\nlet currentAppearance: Appearance = \"system\";\n\nconst prefersDark = (): boolean => {\n    if (typeof window === \"undefined\") {\n        return false;\n    }\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n};\n\nconst setCookie = (name: string, value: string, days = 365): void => {\n    if (typeof document === \"undefined\") {\n        return;\n    }\n\n    const maxAge = days * 24 * 60 * 60;\n    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;\n};\n\nconst getStoredAppearance = (): Appearance => {\n    if (typeof window === \"undefined\") {\n        return \"system\";\n    }\n\n    return (localStorage.getItem(\"appearance\") as Appearance) || \"system\";\n};\n\nconst isDarkMode = (appearance: Appearance): boolean => {\n    return appearance === \"dark\" || (appearance === \"system\" && prefersDark());\n};\n\nconst applyTheme = (appearance: Appearance): void => {\n    if (typeof document === \"undefined\") {\n        return;\n    }\n\n    const isDark = isDarkMode(appearance);\n\n    document.documentElement.classList.toggle(\"dark\", isDark);\n    document.documentElement.style.colorScheme = isDark ? \"dark\" : \"light\";\n};\n\nconst subscribe = (callback: () => void) => {\n    listeners.add(callback);\n\n    return () => listeners.delete(callback);\n};\n\nconst notify = (): void => listeners.forEach((listener) => listener());\n\nconst mediaQuery = (): MediaQueryList | null => {\n    if (typeof window === \"undefined\") {\n        return null;\n    }\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\");\n};\n\nconst handleSystemThemeChange = (): void => applyTheme(currentAppearance);\n\nexport function initializeTheme(): void {\n    if (typeof window === \"undefined\") {\n        return;\n    }\n\n    if (!localStorage.getItem(\"appearance\")) {\n        localStorage.setItem(\"appearance\", \"system\");\n        setCookie(\"appearance\", \"system\");\n    }\n\n    currentAppearance = getStoredAppearance();\n    applyTheme(currentAppearance);\n\n    // Set up system theme change listener\n    mediaQuery()?.addEventListener(\"change\", handleSystemThemeChange);\n}\n\nexport function useAppearance(): UseAppearanceReturn {\n    const appearance: Appearance = useSyncExternalStore(\n        subscribe,\n        () => currentAppearance,\n        () => \"system\",\n    );\n\n    const resolvedAppearance: ResolvedAppearance = isDarkMode(appearance) ? \"dark\" : \"light\";\n\n    const updateAppearance = (mode: Appearance): void => {\n        currentAppearance = mode;\n\n        // Store in localStorage for client-side persistence...\n        localStorage.setItem(\"appearance\", mode);\n\n        // Store in cookie for SSR...\n        setCookie(\"appearance\", mode);\n\n        applyTheme(mode);\n        notify();\n    };\n\n    return { appearance, resolvedAppearance, updateAppearance } as const;\n}\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}