From bf1d2495a9a45aad6f642375612ff02e50de042e Mon Sep 17 00:00:00 2001
From: Mia Vale <300987810+06mia@users.noreply.github.com>
Date: Mon, 31 Aug 2026 02:26:37 +0800
Subject: [PATCH] fix: cycle through system theme in ThemeToggle

---
 .../src/components/layout/ThemeToggle.tsx     | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/layout/ThemeToggle.tsx b/frontend/src/components/layout/ThemeToggle.tsx
index 974c9ee7..957f4d57 100644
--- a/frontend/src/components/layout/ThemeToggle.tsx
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -1,27 +1,40 @@
-import { Moon, Sun } from 'lucide-react'
+import { Monitor, Moon, Sun } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import { useTheme } from '@/lib/hooks/use-theme'
+import type { Theme } from '@/lib/hooks/use-theme'
 import { useReviewLocale } from '@/lib/reviewLocale'
 
+const THEME_CYCLE: Theme[] = ['light', 'dark', 'system']
+
+function nextTheme(current: Theme): Theme {
+  const idx = THEME_CYCLE.indexOf(current)
+  return THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]
+}
+
 export function ThemeToggle() {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { theme, resolvedTheme, setTheme } = useTheme()
   const { text } = useReviewLocale()
 
-  const themeLabel = resolvedTheme === 'dark'
-    ? text('切换到浅色模式', 'Switch to light mode')
-    : text('切换到深色模式', 'Switch to dark mode')
+  const next = nextTheme(theme)
+  const themeLabel = next === 'dark'
+    ? text('切换到深色模式', 'Switch to dark mode')
+    : next === 'system'
+      ? text('切换到跟随系统', 'Switch to system theme')
+      : text('切换到浅色模式', 'Switch to light mode')
 
   return (
     <Button
       variant="ghost"
       size="icon"
-      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      onClick={() => setTheme(next)}
       aria-label={themeLabel}
       title={themeLabel}
       className="shrink-0 text-foreground"
     >
-      {resolvedTheme === 'dark' ? (
+      {theme === 'system' ? (
+        <Monitor className="h-5 w-5" />
+      ) : resolvedTheme === 'dark' ? (
         <Sun className="h-5 w-5" />
       ) : (
         <Moon className="h-5 w-5" />