pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 17:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor theme toggle

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-20 12:16:46 +00:00
parent 6d7b311b6a
commit 0f8edd4016
1 changed files with 14 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/theme/ThemeToggle.tsx
View File

@@ -1,36 +1,23 @@
import { Moon, Sun } from "lucide-react" import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useTheme } from "@/components/theme/ThemeProvider" import { useTheme } from "@/components/theme/ThemeProvider"
export function ThemeToggle() { export function ThemeToggle() {
const { setTheme } = useTheme() const { theme, setTheme } = useTheme()
const toggleTheme = () => {
if (theme === "dark") {
setTheme("light")
} else {
setTheme("dark")
}
}
return ( return (
<DropdownMenu> <Button variant="outline" size="icon" onClick={toggleTheme}>
<DropdownMenuTrigger asChild> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Button variant="outline" size="icon" className="relative"> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <span className="sr-only">Toggle theme</span>
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> </Button>
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="bg-popover border border-border shadow-lg">
<DropdownMenuItem onClick={() => setTheme("light")} className="cursor-pointer">
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")} className="cursor-pointer">
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")} className="cursor-pointer">
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) )
} }