A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
1.4 kB · 42 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243"use client"
import { useTheme } from "next-themes"import { IconSun, IconMoon, IconDeviceDesktop } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
export function ThemeToggle() { const { setTheme } = useTheme()
return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" size="icon" className="size-7"> <IconSun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> <IconMoon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" /> <span className="sr-only">Toggle theme</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => setTheme("light")}> <IconSun className="size-4" /> Light </DropdownMenuItem> <DropdownMenuItem onClick={() => setTheme("dark")}> <IconMoon className="size-4" /> Dark </DropdownMenuItem> <DropdownMenuItem onClick={() => setTheme("system")}> <IconDeviceDesktop className="size-4" /> System </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> )}