multica/packages/ui/src/components/theme-toggle.tsx
Naiyuan Qing 6037be2efa refactor: migrate from Hugeicons to Lucide icons
- Replace @hugeicons/react with lucide-react across all packages
- Update all components to use Lucide icon components
- Add silent option to store refresh methods to control toast display
- Simplify icon usage with direct component imports

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-12 10:12:56 +08:00

40 lines
1.1 KiB
TypeScript

"use client"
import { useTheme } from "next-themes"
import { Sun, Moon, Monitor } from "lucide-react"
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@multica/ui/components/ui/dropdown-menu"
import { SidebarMenuButton } from "@multica/ui/components/ui/sidebar"
export function ThemeToggle() {
const { setTheme } = useTheme()
return (
<DropdownMenu>
<DropdownMenuTrigger
render={
<SidebarMenuButton>
<Sun className="dark:hidden" />
<Moon className="hidden dark:block" />
<span>Theme</span>
</SidebarMenuButton>
}
/>
<DropdownMenuContent side="top" align="start">
<DropdownMenuItem onClick={() => setTheme("light")}>
<Sun /> Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<Moon /> Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<Monitor /> System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}