feat: add system theme option to theme toggle

apps/desktop/renderer/src/components/theme-provider.tsx

@@ -1,19 +1,34 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
-const ThemeContext = createContext({ theme: "light", setTheme: () => {} });
+const ThemeContext = createContext({ theme: "light", setTheme: () => {}, resolvedTheme: "light" });
+
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 
 export function ThemeProvider({ children, defaultTheme = "light", storageKey = "ui-theme" }) {
   const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
+  const [systemTheme, setSystemTheme] = useState(getSystemTheme);
+  const resolvedTheme = theme === "system" ? systemTheme : theme;
 
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove("light", "dark");
-    root.classList.add(theme);
+    root.classList.add(resolvedTheme);
     localStorage.setItem(storageKey, theme);
-  }, [theme, storageKey]);
+  }, [theme, resolvedTheme, storageKey]);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setSystemTheme(getSystemTheme());
+
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
       {children}
     </ThemeContext.Provider>
   );

apps/desktop/renderer/src/components/theme-toggle.tsx

@@ -1,20 +1,80 @@
-import { Moon, Sun } from "lucide-react";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/utils";
 import { useI18n } from "./i18n-provider";
 import { useTheme } from "./theme-provider";
 
+const themeOptions = [
+  { value: "light", labelKey: "theme.light", icon: Sun },
+  { value: "dark", labelKey: "theme.dark", icon: Moon },
+  { value: "system", labelKey: "theme.system", icon: Monitor }
+];
+
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, resolvedTheme } = useTheme();
   const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  const TriggerIcon = theme === "system" ? Monitor : resolvedTheme === "dark" ? Sun : Moon;
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event) => {
+      if (menuRef.current?.contains(event.target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
 
   return (
-    <button
-      type="button"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-      aria-label={t("theme.toggle")}
-      title={t("theme.toggle")}
-    >
-      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-    </button>
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        aria-label={t("theme.toggle")}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        title={t("theme.toggle")}
+      >
+        <TriggerIcon className="h-4 w-4" />
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 top-full z-50 mt-2 w-36 overflow-hidden rounded-md border border-border bg-card py-1 shadow-lg"
+          role="menu"
+        >
+          {themeOptions.map((option) => {
+            const Icon = option.icon;
+            const selected = theme === option.value;
+
+            return (
+              <button
+                key={option.value}
+                type="button"
+                className={cn(
+                  "flex h-8 w-full items-center gap-2 px-3 text-left text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                  selected && "bg-accent/70"
+                )}
+                role="menuitemradio"
+                aria-checked={selected}
+                onClick={() => {
+                  setTheme(option.value);
+                  setOpen(false);
+                }}
+              >
+                <Icon className="h-4 w-4 text-muted-foreground" />
+                <span className="flex-1">{t(option.labelKey)}</span>
+                {selected && <Check className="h-4 w-4 text-primary" />}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 }

apps/desktop/renderer/src/lib/i18n.ts

@@ -2,6 +2,9 @@ export const messages = {
   en: {
     "nav.settings": "Settings",
     "theme.toggle": "Toggle theme",
+    "theme.light": "Light",
+    "theme.dark": "Dark",
+    "theme.system": "System",
     "language.switch": "Switch language",
     "status.completed": "Completed",
     "status.paused": "Paused",
@@ -359,6 +362,9 @@ export const messages = {
   "zh-CN": {
     "nav.settings": "设置",
     "theme.toggle": "切换主题",
+    "theme.light": "浅色",
+    "theme.dark": "深色",
+    "theme.system": "跟随系统",
     "language.switch": "切换语言",
     "status.completed": "已完成",
     "status.paused": "已暂停",