{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"corded-theme","title":"Corded Theme","description":"Theme tokens and a wrapper for Discord-inspired Light, Ash, Dark, and Onyx appearance modes.","registryDependencies":["utils"],"files":[{"path":"registry/default/ui/corded-theme.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport const cordedThemes = {\n  light: \"theme-light\",\n  ash: \"theme-dark\",\n  dark: \"theme-darker\",\n  onyx: \"theme-midnight\",\n} as const\n\nexport type CordedThemeName = keyof typeof cordedThemes\nexport interface CordedThemeProps extends React.HTMLAttributes<HTMLDivElement> { theme?: CordedThemeName }\n\nexport function CordedTheme({ theme = \"dark\", className, style, ...props }: CordedThemeProps) {\n  const discordTheme = cordedThemes[theme]\n\n  React.useEffect(() => {\n    const root = document.documentElement\n    const themeClasses = Object.values(cordedThemes)\n    const previous = themeClasses.find((name) => root.classList.contains(name))\n    root.classList.remove(...themeClasses)\n    root.classList.add(discordTheme)\n    root.dataset.cordedTheme = theme\n    return () => {\n      root.classList.remove(discordTheme)\n      if (previous) root.classList.add(previous)\n      delete root.dataset.cordedTheme\n    }\n  }, [discordTheme, theme])\n\n  return <div data-corded-theme={theme} className={cn(discordTheme, \"bg-[var(--background-base-low)] font-[var(--font-primary)] text-[var(--text-default)]\", className)} style={style} {...props} />\n}\n","type":"registry:ui","target":"components/ui/corded-theme.tsx"}],"type":"registry:ui"}