zzh/2fa-tool
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/2fa-tool.git synced 2026-02-20 11:43:19 +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 (
<html lang="zh-CN" suppressHydrationWarning>
<body className={`font-sans antialiased`}>
<ThemeProvider defaultTheme="system" storageKey="2fa-theme">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
storageKey="2fa-theme"
>
<LanguageProvider>{children}</LanguageProvider>
</ThemeProvider>
<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 (
<div className="min-h-screen bg-background flex flex-col">
{/* Header */}
@@ -501,29 +512,17 @@ export default function TwoFactorAuth() {
</div>
</div>
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>
<Sun className="h-4 w-4 mr-2" />
{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>
<Button
variant="ghost"
size="icon"
onClick={cycleTheme}
title={theme === "light" ? t.themeLight : theme === "dark" ? t.themeDark : t.themeSystem}
>
{theme === "light" && <Sun className="h-5 w-5" />}
{theme === "dark" && <Moon className="h-5 w-5" />}
{theme === "system" && <Monitor className="h-5 w-5" />}
<span className="sr-only">Toggle theme</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>