feat: move theme toggle to settings dialog

Move the theme toggle from the main header to the settings dialog for a
cleaner UI and better organization. The new theme selector uses a
button group design consistent with the language settings.

Changes:
- Created ThemeSettings component with three options: Light, Dark, System
- Added ThemeSettings to the General tab in settings dialog
- Removed ModeToggle component from main header
- Added theme-related i18n keys for all options
- Theme selection takes effect immediately without requiring save

Design:
- Uses button group style matching LanguageSettings
- Icons for each theme option (Sun, Moon, Monitor)
- Consistent with app's blue theme for active state
- Smooth transitions and hover effects

This change simplifies the main header and consolidates all appearance
settings in one place, improving the overall user experience.

src/components/settings/SettingsDialog.tsx

@@ -12,6 +12,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { settingsApi } from "@/lib/api";
 import { LanguageSettings } from "@/components/settings/LanguageSettings";
+import { ThemeSettings } from "@/components/settings/ThemeSettings";
 import { WindowSettings } from "@/components/settings/WindowSettings";
 import { DirectorySettings } from "@/components/settings/DirectorySettings";
 import { ImportExportSection } from "@/components/settings/ImportExportSection";
@@ -201,6 +202,7 @@ export function SettingsDialog({
                       value={settings.language}
                       onChange={(lang) => updateSettings({ language: lang })}
                     />
+                    <ThemeSettings />
                     <WindowSettings
                       settings={settings}
                       onChange={updateSettings}

src/components/settings/ThemeSettings.tsx

@@ -0,0 +1,73 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@/components/theme-provider";
+
+export function ThemeSettings() {
+  const { t } = useTranslation();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <section className="space-y-2">
+      <header className="space-y-1">
+        <h3 className="text-sm font-medium">{t("settings.theme")}</h3>
+        <p className="text-xs text-muted-foreground">
+          {t("settings.themeHint", {
+            defaultValue: "选择应用的外观主题，立即生效。",
+          })}
+        </p>
+      </header>
+      <div className="inline-flex gap-1 rounded-md border border-border bg-background p-1">
+        <ThemeButton
+          active={theme === "light"}
+          onClick={() => setTheme("light")}
+          icon={Sun}
+        >
+          {t("settings.themeLight", { defaultValue: "浅色" })}
+        </ThemeButton>
+        <ThemeButton
+          active={theme === "dark"}
+          onClick={() => setTheme("dark")}
+          icon={Moon}
+        >
+          {t("settings.themeDark", { defaultValue: "深色" })}
+        </ThemeButton>
+        <ThemeButton
+          active={theme === "system"}
+          onClick={() => setTheme("system")}
+          icon={Monitor}
+        >
+          {t("settings.themeSystem", { defaultValue: "跟随系统" })}
+        </ThemeButton>
+      </div>
+    </section>
+  );
+}
+
+interface ThemeButtonProps {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+}
+
+function ThemeButton({ active, onClick, icon: Icon, children }: ThemeButtonProps) {
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      size="sm"
+      variant={active ? "default" : "ghost"}
+      className={cn(
+        "min-w-[96px] gap-1.5",
+        active
+          ? "shadow-sm"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted",
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      {children}
+    </Button>
+  );
+}