zzh/2fa-tool
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/2fa-tool.git synced 2026-02-20 19:50:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: switch theme toggle to cycle button

Browse Source 
Change theme toggle from dropdown to cycle button for three modes.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-01-15 17:04:43 +00:00
parent 4a8fbb7ffe
commit fbf31facd8
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/layout.tsx
View File

@@ -27,7 +27,13 @@ export default function RootLayout({
return ( return (
<html lang="zh-CN" suppressHydrationWarning> <html lang="zh-CN" suppressHydrationWarning>
<body className={`font-sans antialiased`}> <body className={`font-sans antialiased`}>
<ThemeProvider defaultTheme="system" storageKey="2fa-theme"> <ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
storageKey="2fa-theme"
>
<LanguageProvider>{children}</LanguageProvider> <LanguageProvider>{children}</LanguageProvider>
</ThemeProvider> </ThemeProvider>
<Analytics /> <Analytics />

45
app/page.tsx
View File

@@ -485,6 +485,17 @@ export default function TwoFactorAuth() {
} }
}) })
// Cycle through themes
const cycleTheme = () => {
if (theme === "light") {
setTheme("dark")
} else if (theme === "dark") {
setTheme("system")
} else {
setTheme("light")
}
}
return ( return (
<div className="min-h-screen bg-background flex flex-col"> <div className="min-h-screen bg-background flex flex-col">
{/* Header */} {/* Header */}
@@ -501,29 +512,17 @@ export default function TwoFactorAuth() {
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<DropdownMenu> <Button
<DropdownMenuTrigger asChild> variant="ghost"
<Button variant="ghost" size="icon"> size="icon"
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> onClick={cycleTheme}
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> title={theme === "light" ? t.themeLight : theme === "dark" ? t.themeDark : t.themeSystem}
<span className="sr-only">Toggle theme</span> >
</Button> {theme === "light" && <Sun className="h-5 w-5" />}
</DropdownMenuTrigger> {theme === "dark" && <Moon className="h-5 w-5" />}
<DropdownMenuContent align="end"> {theme === "system" && <Monitor className="h-5 w-5" />}
<DropdownMenuItem onClick={() => setTheme("light")}> <span className="sr-only">Toggle theme</span>
<Sun className="h-4 w-4 mr-2" /> </Button>
{t.themeLight}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<Moon className="h-4 w-4 mr-2" />
{t.themeDark}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<Monitor className="h-4 w-4 mr-2" />
{t.themeSystem}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>