shadcn-theme-menu 1.1.2

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,189 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+// Theme Components
+export { ThemeProvider } from './theme-provider';
+export { ThemeToggle } from './theme-toggle';
+export { ThemeDropdown, themeNames, themeColors, formatThemeName } from './theme-dropdown';
+export { default as CinematicThemeSwitcher } from './cinematic-theme-switcher';
+export { SidebarUserMenu } from './sidebar-user-menu';
+
+// Types
+export type { ThemeProviderProps } from 'next-themes';

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/sidebar-user-menu.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { useSession, signOut } from "next-auth/react"
+import {
+  ChevronUp,
+  User2,
+  LogOut,
+  CreditCard,
+  Bell,
+  Palette
+} from 'lucide-react'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import CinematicThemeSwitcher from "./cinematic-theme-switcher"
+import { themeNames, themeColors, formatThemeName } from "./theme-dropdown"
+
+interface SettingsDialogProps {
+  trigger: React.ReactNode;
+}
+
+function SettingsDialog({ trigger }: SettingsDialogProps) {
+  return <>{trigger}</>;
+}
+
+export function SidebarUserMenu() {
+  const router = useRouter()
+  const { data: session } = useSession()
+  const user = session?.user || { name: "Guest User", email: "guest@example.com", image: null }
+  const [colorTheme, setColorTheme] = React.useState("modern-minimal")
+  const [mounted, setMounted] = React.useState(false)
+  const [previewTheme, setPreviewTheme] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    setMounted(true)
+    const saved = localStorage.getItem("color-theme")
+    if (saved && themeNames.includes(saved)) {
+      setColorTheme(saved)
+    }
+  }, [])
+
+  const handleThemeChange = (newTheme: string) => {
+    setColorTheme(newTheme)
+    localStorage.setItem("color-theme", newTheme)
+    document.cookie = `color-theme=${newTheme}; path=/; max-age=31536000`
+    themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+    document.documentElement.classList.add(`theme-${newTheme}`)
+    setPreviewTheme(null)
+  }
+
+  const handleThemePreview = (themeName: string) => {
+    setPreviewTheme(themeName)
+    themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+    document.documentElement.classList.add(`theme-${themeName}`)
+  }
+
+  const handlePreviewEnd = () => {
+    if (previewTheme) {
+      themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+      document.documentElement.classList.add(`theme-${colorTheme}`)
+      setPreviewTheme(null)
+    }
+  }
+
+  const userInitials = user.name
+    ?.split(" ")
+    .map((n: string) => n[0])
+    .join("")
+    .toUpperCase()
+    .substring(0, 2) || "GU"
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu onOpenChange={(open) => !open && handlePreviewEnd()}>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.image || undefined} alt={user.name || "User"} />
+                <AvatarFallback className="rounded-lg">{userInitials}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                <span className="truncate font-semibold">{user.name || "Guest"}</span>
+                <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+              </div>
+              <ChevronUp className="ml-2 size-4 group-data-[collapsible=icon]:hidden" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side="bottom"
+            align="end"
+            sideOffset={4}
+          >
+            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.image || undefined} alt={user.name || "User"} />
+                <AvatarFallback className="rounded-lg">{userInitials}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{user.name || "Guest"}</span>
+                <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+              </div>
+            </div>
+            <DropdownMenuSeparator />
+            <SettingsDialog
+              trigger={
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                  <User2 className="mr-2 h-4 w-4" />
+                  Profile
+                </DropdownMenuItem>
+              }
+            />
+            <DropdownMenuItem>
+              <CreditCard className="mr-2 h-4 w-4" />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell className="mr-2 h-4 w-4" />
+              Notifications
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <Palette className="mr-2 h-4 w-4" />
+                <span>Color Theme</span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent className="max-h-[400px] overflow-y-auto">
+                  <div className="px-2 py-1.5 flex items-center justify-center">
+                    <CinematicThemeSwitcher />
+                  </div>
+                  <DropdownMenuSeparator />
+                  {themeNames.map((themeName) => {
+                    const colors = themeColors[themeName];
+                    return (
+                      <DropdownMenuItem
+                        key={themeName}
+                        onClick={() => handleThemeChange(themeName)}
+                        onMouseEnter={() => handleThemePreview(themeName)}
+                        onMouseLeave={handlePreviewEnd}
+                        className={colorTheme === themeName ? "bg-accent" : ""}
+                      >
+                        <div className="flex items-center justify-between w-full">
+                          <div className="flex items-center gap-2">
+                            {colors && (
+                              <div className="flex items-center gap-1">
+                                <div
+                                  className="w-3 h-3 rounded-full border border-border"
+                                  style={{ backgroundColor: colors.primary }}
+                                />
+                                <div
+                                  className="w-3 h-3 rounded-full border border-border"
+                                  style={{ backgroundColor: colors.secondary }}
+                                />
+                              </div>
+                            )}
+                            <span>{formatThemeName(themeName)}</span>
+                          </div>
+                          {colorTheme === themeName && (
+                            <span className="text-xs">✓</span>
+                          )}
+                        </div>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={async () => {
+              await signOut()
+              router.push("/")
+            }}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/src/theme-dropdown.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Moon, Sun, Palette, Monitor } from "lucide-react"
+import { Button } from "./components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./components/ui/dropdown-menu"
+import { useTheme } from "next-themes"
+
+export const themeNames = [
+  "modern-minimal",
+  "elegant-luxury",
+  "cyberpunk",
+  "twitter",
+  "mocha-mousse",
+  "bubblegum",
+  "amethyst-haze",
+  "pink-lemonade",
+  "notebook",
+  "doom-64",
+  "catppuccin",
+  "graphite",
+  "perpetuity",
+  "kodama-grove",
+  "cosmic-night",
+  "tangerine",
+  "quantum-rose",
+  "nature",
+  "bold-tech",
+  "amber-minimal",
+  "supabase",
+  "neo-brutalism",
+  "solar-dusk",
+  "claymorphism",
+  "pastel-dreams"
+];
+
+export const themeColors: Record<string, { primary: string; secondary: string }> = {
+  "modern-minimal": { primary: "#3b82f6", secondary: "#f3f4f6" },
+  "elegant-luxury": { primary: "#9b2c2c", secondary: "#fdf2d6" },
+  "cyberpunk": { primary: "#ff00c8", secondary: "#f0f0ff" },
+  "twitter": { primary: "#1e9df1", secondary: "#0f1419" },
+  "mocha-mousse": { primary: "#A37764", secondary: "#BAAB92" },
+  "bubblegum": { primary: "#d04f99", secondary: "#8acfd1" },
+  "amethyst-haze": { primary: "#8a79ab", secondary: "#dfd9ec" },
+  "pink-lemonade": { primary: "#a84370", secondary: "#f1c4e6" },
+  "notebook": { primary: "#606060", secondary: "#dedede" },
+  "doom-64": { primary: "#b71c1c", secondary: "#556b2f" },
+  "catppuccin": { primary: "#8839ef", secondary: "#ccd0da" },
+  "graphite": { primary: "#606060", secondary: "#e0e0e0" },
+  "perpetuity": { primary: "#06858e", secondary: "#d9eaea" },
+  "kodama-grove": { primary: "#8d9d4f", secondary: "#decea0" },
+  "cosmic-night": { primary: "#6e56cf", secondary: "#e4dfff" },
+  "tangerine": { primary: "#e05d38", secondary: "#f3f4f6" },
+  "quantum-rose": { primary: "#e6067a", secondary: "#ffd6ff" },
+  "nature": { primary: "#2e7d32", secondary: "#e8f5e9" },
+  "bold-tech": { primary: "#8b5cf6", secondary: "#f3f0ff" },
+  "amber-minimal": { primary: "#f59e0b", secondary: "#f3f4f6" },
+  "supabase": { primary: "#72e3ad", secondary: "#fdfdfd" },
+  "neo-brutalism": { primary: "#ff3333", secondary: "#ffff00" },
+  "solar-dusk": { primary: "#B45309", secondary: "#E4C090" },
+  "claymorphism": { primary: "#6366f1", secondary: "#d6d3d1" },
+  "pastel-dreams": { primary: "#a78bfa", secondary: "#e9d8fd" }
+};
+
+export const formatThemeName = (name: string) => {
+  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+
+interface ThemeDropdownProps {
+  Button?: React.ComponentType<any>
+  DropdownMenu?: any
+  iconSrc?: string
+  onColorThemeChange?: (theme: string) => void
+  onModeChange?: (mode: string) => void
+}
+
+export function ThemeDropdown({
+  Button: CustomButton,
+  DropdownMenu: CustomDropdownMenu,
+  iconSrc,
+  onColorThemeChange,
+  onModeChange
+}: ThemeDropdownProps = {}) {
+  const { theme, setTheme } = useTheme()
+  const [colorTheme, setColorTheme] = useState("modern-minimal")
+  const [mounted, setMounted] = useState(false)
+  const [previewTheme, setPreviewTheme] = useState<string | null>(null)
+
+  const ButtonComp = CustomButton || Button
+  const MenuComp = CustomDropdownMenu || {
+    Root: DropdownMenu,
+    Trigger: DropdownMenuTrigger,
+    Content: DropdownMenuContent,
+    Item: DropdownMenuItem,
+    Label: DropdownMenuLabel,
+    Separator: DropdownMenuSeparator
+  }
+
+  useEffect(() => {
+    setMounted(true)
+    const saved = localStorage.getItem("color-theme")
+    if (saved && themeNames.includes(saved)) {
+      setColorTheme(saved)
+    }
+  }, [])
+
+  const handleThemeChange = (newTheme: string) => {
+    setColorTheme(newTheme)
+    localStorage.setItem("color-theme", newTheme)
+    document.cookie = `color-theme=${newTheme}; path=/; max-age=31536000`
+
+    // Remove all theme classes
+    themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+    // Add new theme class
+    document.documentElement.classList.add(`theme-${newTheme}`)
+
+    setPreviewTheme(null)
+    onColorThemeChange?.(newTheme)
+  }
+
+  const handleModeChange = (mode: string) => {
+    setTheme(mode)
+    onModeChange?.(mode)
+  }
+
+  const handleThemePreview = (themeName: string) => {
+    setPreviewTheme(themeName)
+    // Remove all theme classes
+    themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+    // Add preview theme class
+    document.documentElement.classList.add(`theme-${themeName}`)
+  }
+
+  const handlePreviewEnd = () => {
+    if (previewTheme) {
+      // Restore the actual selected theme
+      themeNames.forEach(t => document.documentElement.classList.remove(`theme-${t}`))
+      document.documentElement.classList.add(`theme-${colorTheme}`)
+      setPreviewTheme(null)
+    }
+  }
+
+  const formatThemeName = (name: string) => {
+    return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+  }
+
+  if (!mounted) {
+    return null
+  }
+
+  const Root = MenuComp.Root || MenuComp
+  const Trigger = MenuComp.Trigger || DropdownMenuTrigger
+  const Content = MenuComp.Content || DropdownMenuContent
+  const Item = MenuComp.Item || DropdownMenuItem
+  const Label = MenuComp.Label || DropdownMenuLabel
+  const Separator = MenuComp.Separator || DropdownMenuSeparator
+
+  return (
+    <Root onOpenChange={(open: boolean) => !open && handlePreviewEnd()}>
+      <Trigger asChild>
+        <ButtonComp variant="ghost" size="icon" className="relative">
+          {iconSrc ? (
+            <img src={iconSrc} alt="Themes" width={32} height={32} />
+          ) : (
+            <Palette className="h-5 w-5" />
+          )}
+        </ButtonComp>
+      </Trigger>
+      <Content align="end" className="w-56 max-h-[400px] overflow-y-auto">
+        <Label>Appearance</Label>
+        <Separator />
+        <Item onClick={() => handleModeChange("light")} className="cursor-pointer py-1 h-7">
+          <Sun className="mr-2 h-3.5 w-3.5" />
+          <span className="text-sm">Light</span>
+          {theme === "light" && <span className="ml-auto text-xs">✓</span>}
+        </Item>
+        <Item onClick={() => handleModeChange("dark")} className="cursor-pointer py-1 h-7">
+          <Moon className="mr-2 h-3.5 w-3.5" />
+          <span className="text-sm">Dark</span>
+          {theme === "dark" && <span className="ml-auto text-xs">✓</span>}
+        </Item>
+        <Item onClick={() => handleModeChange("system")} className="cursor-pointer py-1 h-7">
+          <Monitor className="mr-2 h-3.5 w-3.5" />
+          <span className="text-sm">System</span>
+          {theme === "system" && <span className="ml-auto text-xs">✓</span>}
+        </Item>
+        <Separator />
+        <Label>Color Theme</Label>
+        <div className="text-xs text-muted-foreground px-2 py-1.5">
+          Current: {formatThemeName(colorTheme)}
+        </div>
+        <Separator />
+        {themeNames.map((themeName) => {
+          const colors = themeColors[themeName];
+          return (
+            <Item
+              key={themeName}
+              onClick={() => handleThemeChange(themeName)}
+              onMouseEnter={() => handleThemePreview(themeName)}
+              onMouseLeave={handlePreviewEnd}
+              className={`cursor-pointer ${colorTheme === themeName ? "bg-accent" : ""
+                }`}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-2">
+                  {colors && (
+                    <div className="flex items-center gap-1">
+                      <div
+                        className="w-3 h-3 rounded-full border border-border"
+                        style={{ backgroundColor: colors.primary }}
+                      />
+                      <div
+                        className="w-3 h-3 rounded-full border border-border"
+                        style={{ backgroundColor: colors.secondary }}
+                      />
+                    </div>
+                  )}
+                  <span>{formatThemeName(themeName)}</span>
+                </div>
+                {colorTheme === themeName && (
+                  <span className="text-xs">✓</span>
+                )}
+              </div>
+            </Item>
+          );
+        })}
+      </Content>
+    </Root>
+  )
+}

package/src/theme-provider.tsx

@@ -0,0 +1,9 @@
+'use client'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}