From 320bf3eeac12dbc4871b2b8501ad4943d5ca8f89 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 17 Oct 2025 23:51:58 +0800
Subject: [PATCH] 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/App.tsx                                |  2 -
 src/components/settings/SettingsDialog.tsx |  2 +
 src/components/settings/ThemeSettings.tsx  | 73 ++++++++++++++++++++++
 src/i18n/locales/en.json                   |  6 ++
 src/i18n/locales/zh.json                   |  6 ++
 5 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 src/components/settings/ThemeSettings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f475cf5..cae24ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import { providersApi, settingsApi, type AppType, type ProviderSwitchEvent } fro
 import { useProviderActions } from "@/hooks/useProviderActions";
 import { extractErrorMessage } from "@/utils/errorUtils";
 import { AppSwitcher } from "@/components/AppSwitcher";
-import { ModeToggle } from "@/components/mode-toggle";
 import { ProviderList } from "@/components/providers/ProviderList";
 import { AddProviderDialog } from "@/components/providers/AddProviderDialog";
 import { EditProviderDialog } from "@/components/providers/EditProviderDialog";
@@ -117,7 +116,6 @@ function App() {
             >
               CC Switch
             </a>
-            <ModeToggle />
             <Button
               variant="ghost"
               size="icon"
diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index 1a219b4..de7b902 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/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}
diff --git a/src/components/settings/ThemeSettings.tsx b/src/components/settings/ThemeSettings.tsx
new file mode 100644
index 0000000..f72acd7
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 6ea9d8b..77b4b12 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -87,6 +87,12 @@
     "title": "Settings",
     "general": "General",
     "language": "Language",
+    "languageHint": "Preview interface language immediately after switching, takes effect permanently after saving.",
+    "theme": "Theme",
+    "themeHint": "Choose the appearance theme for the app, takes effect immediately.",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeSystem": "System",
     "importExport": "Import/Export Config",
     "exportConfig": "Export Config to File",
     "selectConfigFile": "Select Config File",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index ee1c046..e24ecae 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -87,6 +87,12 @@
     "title": "设置",
     "general": "通用",
     "language": "界面语言",
+    "languageHint": "切换后立即预览界面语言，保存后永久生效。",
+    "theme": "外观主题",
+    "themeHint": "选择应用的外观主题，立即生效。",
+    "themeLight": "浅色",
+    "themeDark": "深色",
+    "themeSystem": "跟随系统",
     "importExport": "导入导出配置",
     "exportConfig": "导出配置到文件",
     "selectConfigFile": "选择配置文件",