diff options
Diffstat (limited to 'src/components/ThemeToggle.tsx')
| -rw-r--r-- | src/components/ThemeToggle.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx new file mode 100644 index 0000000..d8776b6 --- /dev/null +++ b/src/components/ThemeToggle.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +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="outline" size="icon"> + <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" /> + <Moon className="absolute h-[1.2rem] w-[1.2rem] 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")}> + Light + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setTheme("dark")}> + Dark + </DropdownMenuItem> + <DropdownMenuItem onClick={() => setTheme("system")}> + System + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) +}
\ No newline at end of file |