fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove dropdown from theme mode toggle

Browse Source
This commit is contained in:
henrygd
2025-08-25 16:09:49 -04:00
parent fb3c70a1bc
commit e07558237f
1 changed files with 11 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
beszel/site/src/components/mode-toggle.tsx
View File

@@ -1,56 +1,21 @@
import { Trans } from "@lingui/react/macro"; import { t } from "@lingui/core/macro"
import { t } from "@lingui/core/macro"; import { MoonStarIcon, SunIcon } from "lucide-react"
import { LaptopIcon, MoonStarIcon, SunIcon } 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-provider" import { useTheme } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
export function ModeToggle() { export function ModeToggle() {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const options = [
{
theme: "light",
Icon: SunIcon,
label: <Trans comment="Light theme">Light</Trans>,
},
{
theme: "dark",
Icon: MoonStarIcon,
label: <Trans comment="Dark theme">Dark</Trans>,
},
{
theme: "system",
Icon: LaptopIcon,
label: <Trans comment="System theme">System</Trans>,
},
]
return ( return (
<DropdownMenu> <Button
<DropdownMenuTrigger asChild> variant={"ghost"}
<Button variant={"ghost"} size="icon" aria-label={t`Toggle theme`}> size="icon"
<SunIcon className="h-[1.2rem] w-[1.2rem] dark:opacity-0" /> aria-label={t`Toggle theme`}
<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" /> onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
</Button> >
</DropdownMenuTrigger> <SunIcon className="h-[1.2rem] w-[1.2rem] transition-all -rotate-90 dark:opacity-0 dark:rotate-0" />
<DropdownMenuContent> <MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] transition-all opacity-0 -rotate-90 dark:opacity-100 dark:rotate-0" />
{options.map((opt) => { </Button>
const selected = opt.theme === theme
return (
<DropdownMenuItem
key={opt.theme}
className={cn("px-2.5", selected ? "font-semibold" : "")}
onClick={() => setTheme(opt.theme as "dark" | "light" | "system")}
>
<opt.Icon className={cn("me-2 h-4 w-4 opacity-80", selected && "opacity-100")} />
{opt.label}
</DropdownMenuItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
) )
} }