{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-toggle", "title": "Theme Toggle", "author": "Alex Chih (https://alexchih.com)", "description": "Class-strategy dark mode toggle with localStorage persistence and no-flash pre-paint script helper.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://washiveil.alexchih.com/r/theme.json" ], "files": [ { "path": "registry/washiveil/ui/theme-toggle.tsx", "content": "'use client';\n\n// A stored \"theme\" is an explicit pin; its absence means follow the system.\n\nimport { Moon, Sun } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function ThemeToggle({ className }: { className?: string }) {\n return (\n {\n const isDark = document.documentElement.classList.toggle('dark');\n try {\n // Back in step with the system — drop the pin instead of storing a\n // value that only agrees today.\n if (isDark === matchMedia('(prefers-color-scheme: dark)').matches) {\n localStorage.removeItem('theme');\n } else {\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n }\n } catch {\n /* non-persistent */\n }\n }}\n className={cn(\n 'grid size-9 place-items-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n className,\n )}\n >\n \n \n \n );\n}\n\n// Inline so it resolves before first paint, ahead of any bundle.\nexport function ThemeScript() {\n return (\n \n );\n}\n", "type": "registry:ui" } ], "docs": "Place inside in your root layout to avoid a dark-mode flash; put wherever the switch lives.", "type": "registry:ui" }