diff --git a/src/App.tsx b/src/App.tsx
index f7470a18aa..1270e7f3dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -225,7 +225,7 @@ function App() {
   const skillsPageRef = useRef<any>(null);
   const unifiedSkillsPanelRef = useRef<any>(null);
   const addActionButtonClass =
-    "bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-orange-600 text-white shadow-lg shadow-orange-500/30 dark:shadow-orange-500/40 rounded-full w-8 h-8";
+    "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 rounded-full w-8 h-8";
 
   const {
     isRunning: isProxyRunning,
@@ -1115,8 +1115,8 @@ function App() {
                     className={cn(
                       "text-xl font-semibold transition-colors",
                       isProxyRunning && isCurrentAppTakeoverActive
-                        ? "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
-                        : "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
+                        ? "text-primary hover:text-primary/80"
+                        : "text-foreground/80 hover:text-foreground",
                     )}
                   >
                     CC Switch
@@ -1130,7 +1130,7 @@ function App() {
                     setCurrentView("settings");
                   }}
                   title={t("common.settings")}
-                  className="hover:bg-black/5 dark:hover:bg-white/5"
+                  className="hover:bg-accent/60"
                 >
                   <Settings className="w-4 h-4" />
                 </Button>
@@ -1151,7 +1151,7 @@ function App() {
                     title={t("usage.title", {
                       defaultValue: "使用统计",
                     })}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                    className="hover:bg-accent/60"
                   >
                     <BarChart2 className="w-4 h-4" />
                   </Button>
@@ -1189,7 +1189,7 @@ function App() {
                     variant="ghost"
                     size="sm"
                     onClick={() => promptPanelRef.current?.openAdd()}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                    className="hover:bg-accent/60"
                   >
                     <Plus className="w-4 h-4 mr-2" />
                     {t("prompts.add")}
@@ -1201,7 +1201,7 @@ function App() {
                       variant="ghost"
                       size="sm"
                       onClick={() => mcpPanelRef.current?.openImport()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <Download className="w-4 h-4 mr-2" />
                       {t("mcp.importExisting")}
@@ -1210,7 +1210,7 @@ function App() {
                       variant="ghost"
                       size="sm"
                       onClick={() => mcpPanelRef.current?.openAdd()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <Plus className="w-4 h-4 mr-2" />
                       {t("mcp.addMcp")}
@@ -1225,7 +1225,7 @@ function App() {
                       onClick={() =>
                         unifiedSkillsPanelRef.current?.openRestoreFromBackup()
                       }
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <History className="w-4 h-4 mr-2" />
                       {t("skills.restoreFromBackup.button")}
@@ -1236,7 +1236,7 @@ function App() {
                       onClick={() =>
                         unifiedSkillsPanelRef.current?.openInstallFromZip()
                       }
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <FolderArchive className="w-4 h-4 mr-2" />
                       {t("skills.installFromZip.button")}
@@ -1247,7 +1247,7 @@ function App() {
                       onClick={() =>
                         unifiedSkillsPanelRef.current?.openImport()
                       }
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <Download className="w-4 h-4 mr-2" />
                       {t("skills.import")}
@@ -1256,7 +1256,7 @@ function App() {
                       variant="ghost"
                       size="sm"
                       onClick={() => setCurrentView("skillsDiscovery")}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <Search className="w-4 h-4 mr-2" />
                       {t("skills.discover")}
@@ -1269,7 +1269,7 @@ function App() {
                       variant="ghost"
                       size="sm"
                       onClick={() => skillsPageRef.current?.refresh()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <RefreshCw className="w-4 h-4 mr-2" />
                       {t("skills.refresh")}
@@ -1278,7 +1278,7 @@ function App() {
                       variant="ghost"
                       size="sm"
                       onClick={() => skillsPageRef.current?.openRepoManager()}
-                      className="hover:bg-black/5 dark:hover:bg-white/5"
+                      className="hover:bg-accent/60"
                     >
                       <Settings className="w-4 h-4 mr-2" />
                       {t("skills.repoManager")}
@@ -1312,7 +1312,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("workspace")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("workspace.manage")}
                               >
                                 <FolderOpen className="w-4 h-4" />
@@ -1321,7 +1321,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("openclawEnv")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("openclaw.env.title")}
                               >
                                 <KeyRound className="w-4 h-4" />
@@ -1330,7 +1330,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("openclawTools")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("openclaw.tools.title")}
                               >
                                 <Shield className="w-4 h-4" />
@@ -1339,7 +1339,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("openclawAgents")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("openclaw.agents.title")}
                               >
                                 <Cpu className="w-4 h-4" />
@@ -1348,7 +1348,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("sessions")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("sessionManager.title")}
                               >
                                 <History className="w-4 h-4" />
@@ -1361,7 +1361,7 @@ function App() {
                                 size="sm"
                                 onClick={() => setCurrentView("skills")}
                                 className={cn(
-                                  "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                                  "text-muted-foreground hover:text-foreground hover:bg-accent/60",
                                   "transition-all duration-200 ease-in-out overflow-hidden",
                                   hasSkillsSupport
                                     ? "opacity-100 w-8 scale-100 px-2"
@@ -1375,7 +1375,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("prompts")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("prompts.manage")}
                               >
                                 <Book className="w-4 h-4" />
@@ -1385,7 +1385,7 @@ function App() {
                                 size="sm"
                                 onClick={() => setCurrentView("sessions")}
                                 className={cn(
-                                  "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                                  "text-muted-foreground hover:text-foreground hover:bg-accent/60",
                                   "transition-all duration-200 ease-in-out overflow-hidden",
                                   hasSessionSupport
                                     ? "opacity-100 w-8 scale-100 px-2"
@@ -1399,7 +1399,7 @@ function App() {
                                 variant="ghost"
                                 size="sm"
                                 onClick={() => setCurrentView("mcp")}
-                                className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                                className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
                                 title={t("mcp.title")}
                               >
                                 <McpIcon size={16} />
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index c2eb952b3d..c64b0638da 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -37,7 +37,7 @@ export function ConfirmDialog({
 
   const IconComponent = variant === "info" ? Info : AlertTriangle;
   const iconClass =
-    variant === "info" ? "h-5 w-5 text-blue-500" : "h-5 w-5 text-destructive";
+    variant === "info" ? "h-5 w-5 text-primary" : "h-5 w-5 text-destructive";
 
   return (
     <Dialog
diff --git a/src/components/DeepLinkImportDialog.tsx b/src/components/DeepLinkImportDialog.tsx
index 05acafa892..5238f49ef8 100644
--- a/src/components/DeepLinkImportDialog.tsx
+++ b/src/components/DeepLinkImportDialog.tsx
@@ -329,7 +329,7 @@ export function DeepLinkImportDialog() {
             </DialogHeader>
 
             {/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
-            <div className="space-y-4 px-8 py-4 max-h-[60vh] overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:block [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700">
+            <div className="max-h-[60vh] space-y-4 overflow-y-auto px-8 py-4 [scrollbar-width:thin] [&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70">
               {request.resource === "prompt" && (
                 <PromptConfirmation request={request} />
               )}
@@ -380,7 +380,7 @@ export function DeepLinkImportDialog() {
                     <div className="font-medium text-sm text-muted-foreground">
                       {t("deeplink.homepage")}
                     </div>
-                    <div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
+                    <div className="col-span-2 text-sm break-all text-primary">
                       {request.homepage}
                     </div>
                   </div>
@@ -501,7 +501,7 @@ export function DeepLinkImportDialog() {
                           {t("deeplink.configSource")}
                         </div>
                         <div className="col-span-2 text-sm">
-                          <span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
+                          <span className="inline-flex items-center px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium">
                             {configSource === "base64"
                               ? t("deeplink.configEmbedded")
                               : t("deeplink.configRemote")}
@@ -635,8 +635,8 @@ export function DeepLinkImportDialog() {
                           <span
                             className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${
                               request.usageEnabled !== false
-                                ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
-                                : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
+                                ? "border border-primary/20 bg-primary/10 text-primary"
+                                : "border border-border/70 bg-muted/60 text-muted-foreground"
                             }`}
                           >
                             {request.usageEnabled !== false
@@ -703,7 +703,7 @@ export function DeepLinkImportDialog() {
                   )}
 
                   {/* Warning */}
-                  <div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
+                  <div className="rounded-lg border border-accent/40 bg-accent/20 p-3 text-sm text-accent-foreground">
                     {t("deeplink.warning")}
                   </div>
                 </>
diff --git a/src/components/JsonEditor.tsx b/src/components/JsonEditor.tsx
index 8606602527..1c071ba5a5 100644
--- a/src/components/JsonEditor.tsx
+++ b/src/components/JsonEditor.tsx
@@ -84,54 +84,89 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
     // 创建编辑器扩展
     const minHeightPx = height ? undefined : Math.max(1, rows) * 18;
 
-    // 使用 baseTheme 定义基础样式，优先级低于 oneDark，但可以正确响应主题
-    const baseTheme = EditorView.baseTheme({
-      ".cm-editor": {
-        border: "1px solid hsl(var(--border))",
-        borderRadius: "0.5rem",
-        background: "transparent",
-      },
-      ".cm-editor.cm-focused": {
-        outline: "none",
-        borderColor: "hsl(var(--primary))",
-      },
-      ".cm-scroller": {
-        background: "transparent",
-      },
-      ".cm-gutters": {
-        background: "transparent",
-        borderRight: "1px solid hsl(var(--border))",
-        color: "hsl(var(--muted-foreground))",
-      },
-      ".cm-selectionBackground, .cm-content ::selection": {
-        background: "hsl(var(--primary) / 0.18)",
-      },
-      ".cm-selectionMatch": {
-        background: "hsl(var(--primary) / 0.12)",
-      },
-      ".cm-activeLine": {
-        background: "hsl(var(--primary) / 0.08)",
-      },
-      ".cm-activeLineGutter": {
-        background: "hsl(var(--primary) / 0.08)",
-      },
-    });
-
     // 使用 theme 定义尺寸和字体样式
     const heightValue = height
       ? typeof height === "number"
         ? `${height}px`
         : height
       : undefined;
+    const editorTheme = EditorView.theme(
+      {
+        "&": heightValue
+          ? { height: heightValue }
+          : { minHeight: `${minHeightPx}px` },
+        ".cm-editor": {
+          height: "100%",
+          backgroundColor: "transparent",
+          color: "hsl(var(--foreground))",
+        },
+        ".cm-editor.cm-focused": {
+          outline: "none",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          backgroundColor: "transparent",
+        },
+        ".cm-content": {
+          padding: "0.875rem 0",
+          caretColor: "hsl(var(--primary))",
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+          fontSize: "14px",
+        },
+        ".cm-line": {
+          padding: "0 1rem",
+        },
+        ".cm-placeholder": {
+          color: "hsl(var(--muted-foreground) / 0.85)",
+        },
+        ".cm-cursor, .cm-dropCursor": {
+          borderLeftColor: "hsl(var(--primary))",
+        },
+        ".cm-gutters": {
+          minHeight: "100%",
+          backgroundColor: "hsl(var(--muted) / 0.65)",
+          color: "hsl(var(--muted-foreground))",
+          borderRight: "1px solid hsl(var(--border))",
+        },
+        ".cm-gutterElement": {
+          padding: "0 0.75rem",
+        },
+        ".cm-activeLine": {
+          backgroundColor: "hsl(var(--accent) / 0.28)",
+        },
+        ".cm-activeLineGutter": {
+          backgroundColor: "hsl(var(--accent) / 0.4)",
+          color: "hsl(var(--foreground))",
+        },
+        ".cm-selectionBackground, .cm-content ::selection": {
+          backgroundColor: "hsl(var(--primary) / 0.18) !important",
+        },
+        ".cm-selectionMatch": {
+          backgroundColor: "hsl(var(--primary) / 0.12)",
+        },
+        ".cm-matchingBracket": {
+          backgroundColor: "hsl(var(--accent) / 0.45)",
+          outline: "1px solid hsl(var(--border))",
+          color: "hsl(var(--foreground))",
+        },
+        ".cm-nonmatchingBracket": {
+          color: "hsl(var(--destructive))",
+        },
+        ".cm-panels, .cm-tooltip": {
+          backgroundColor: "hsl(var(--popover))",
+          color: "hsl(var(--popover-foreground))",
+          border: "1px solid hsl(var(--border))",
+        },
+        ".cm-diagnosticText": {
+          color: "hsl(var(--destructive))",
+        },
+      },
+      { dark: darkMode },
+    );
     const sizingTheme = EditorView.theme({
-      "&": heightValue
-        ? { height: heightValue }
-        : { minHeight: `${minHeightPx}px` },
-      ".cm-scroller": { overflow: "auto" },
       ".cm-content": {
-        fontFamily:
-          "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-        fontSize: "14px",
+        lineHeight: "1.6",
       },
     });
 
@@ -139,7 +174,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       basicSetup,
       language === "javascript" ? javascript() : json(),
       placeholder(placeholderText || ""),
-      baseTheme,
+      editorTheme,
       sizingTheme,
       jsonLinter,
       EditorView.updateListener.of((update) => {
@@ -150,43 +185,8 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       }),
     ];
 
-    // 如果启用深色模式，添加深色主题
     if (darkMode) {
-      extensions.push(oneDark);
-      // 在 oneDark 之后强制覆盖边框样式
-      extensions.push(
-        EditorView.theme({
-          ".cm-editor": {
-            border: "1px solid hsl(var(--border))",
-            borderRadius: "0.5rem",
-            background: "transparent",
-          },
-          ".cm-editor.cm-focused": {
-            outline: "none",
-            borderColor: "hsl(var(--primary))",
-          },
-          ".cm-scroller": {
-            background: "transparent",
-          },
-          ".cm-gutters": {
-            background: "transparent",
-            borderRight: "1px solid hsl(var(--border))",
-            color: "hsl(var(--muted-foreground))",
-          },
-          ".cm-selectionBackground, .cm-content ::selection": {
-            background: "hsl(var(--primary) / 0.18)",
-          },
-          ".cm-selectionMatch": {
-            background: "hsl(var(--primary) / 0.12)",
-          },
-          ".cm-activeLine": {
-            background: "hsl(var(--primary) / 0.08)",
-          },
-          ".cm-activeLineGutter": {
-            background: "hsl(var(--primary) / 0.08)",
-          },
-        }),
-      );
+      extensions.unshift(oneDark);
     }
 
     // 创建初始状态
@@ -208,7 +208,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       view.destroy();
       viewRef.current = null;
     };
-  }, [darkMode, rows, height, language, jsonLinter]); // 依赖项中不包含 onChange 和 placeholder，避免不必要的重建
+  }, [darkMode, rows, height, language, jsonLinter, placeholderText]);
 
   // 当 value 从外部改变时更新编辑器内容
   useEffect(() => {
@@ -257,20 +257,28 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       className={isFullHeight ? "flex flex-col" : ""}
     >
       <div
-        ref={editorRef}
-        style={{ width: "100%", height: isFullHeight ? undefined : "auto" }}
-        className={isFullHeight ? "flex-1 min-h-0" : ""}
-      />
-      {language === "json" && (
-        <button
-          type="button"
-          onClick={handleFormat}
-          className={`${isFullHeight ? "mt-2 flex-shrink-0" : "mt-2"} inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors`}
-        >
-          <Wand2 className="w-3.5 h-3.5" />
-          {t("common.format", { defaultValue: "格式化" })}
-        </button>
-      )}
+        className={`overflow-hidden rounded-[calc(var(--radius)+0.125rem)] border border-border/80 bg-card/85 shadow-sm ${
+          isFullHeight ? "flex min-h-0 flex-1 flex-col" : ""
+        }`}
+      >
+        <div
+          ref={editorRef}
+          style={{ width: "100%", height: isFullHeight ? undefined : "auto" }}
+          className={isFullHeight ? "min-h-0 flex-1" : ""}
+        />
+        {language === "json" && (
+          <div className="flex items-center justify-end border-t border-border/70 bg-muted/35 px-3 py-2">
+            <button
+              type="button"
+              onClick={handleFormat}
+              className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent/70 hover:text-accent-foreground"
+            >
+              <Wand2 className="h-3.5 w-3.5" />
+              {t("common.format", { defaultValue: "格式化" })}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/MarkdownEditor.tsx b/src/components/MarkdownEditor.tsx
index a59a64dcbb..add192f646 100644
--- a/src/components/MarkdownEditor.tsx
+++ b/src/components/MarkdownEditor.tsx
@@ -32,34 +32,70 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   useEffect(() => {
     if (!editorRef.current) return;
 
-    // 定义基础主题
-    const baseTheme = EditorView.baseTheme({
-      "&": {
-        height: "100%",
-        minHeight,
-        maxHeight: maxHeight || "none",
-      },
-      ".cm-scroller": {
-        overflow: "auto",
-        fontFamily:
-          "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-        fontSize: "14px",
-      },
-      "&light .cm-content, &dark .cm-content": {
-        padding: "12px 0",
-      },
-      "&light .cm-editor, &dark .cm-editor": {
-        backgroundColor: "transparent",
-      },
-      "&.cm-focused": {
-        outline: "none",
+    const editorTheme = EditorView.theme(
+      {
+        "&": {
+          height: "100%",
+          minHeight,
+          maxHeight: maxHeight || "none",
+        },
+        ".cm-editor": {
+          height: "100%",
+          backgroundColor: "transparent",
+          color: "hsl(var(--foreground))",
+        },
+        ".cm-scroller": {
+          overflow: "auto",
+          backgroundColor: "transparent",
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+          fontSize: "14px",
+        },
+        ".cm-content": {
+          padding: "0.875rem 1rem",
+          caretColor: "hsl(var(--primary))",
+          lineHeight: "1.6",
+        },
+        ".cm-placeholder": {
+          color: "hsl(var(--muted-foreground) / 0.85)",
+        },
+        ".cm-cursor, .cm-dropCursor": {
+          borderLeftColor: "hsl(var(--primary))",
+        },
+        ".cm-gutters": {
+          minHeight: "100%",
+          backgroundColor: "hsl(var(--muted) / 0.65)",
+          color: "hsl(var(--muted-foreground))",
+          borderRight: "1px solid hsl(var(--border))",
+        },
+        ".cm-gutterElement": {
+          padding: "0 0.75rem",
+        },
+        ".cm-activeLine": {
+          backgroundColor: readOnly
+            ? "transparent"
+            : "hsl(var(--accent) / 0.28)",
+        },
+        ".cm-activeLineGutter": {
+          backgroundColor: readOnly
+            ? "transparent"
+            : "hsl(var(--accent) / 0.4)",
+          color: "hsl(var(--foreground))",
+        },
+        ".cm-selectionBackground, .cm-content ::selection": {
+          backgroundColor: "hsl(var(--primary) / 0.18) !important",
+        },
+        "&.cm-focused": {
+          outline: "none",
+        },
       },
-    });
+      { dark: darkMode },
+    );
 
     const extensions = [
       basicSetup,
       markdown(),
-      baseTheme,
+      editorTheme,
       EditorView.lineWrapping,
       EditorState.readOnly.of(readOnly),
     ];
@@ -84,32 +120,8 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
       );
     }
 
-    // 如果启用深色模式，添加深色主题
     if (darkMode) {
-      extensions.push(oneDark);
-    } else {
-      // 浅色模式下的简单样式调整，使其更融入 UI
-      extensions.push(
-        EditorView.theme(
-          {
-            "&": {
-              backgroundColor: "transparent",
-            },
-            ".cm-content": {
-              color: "#374151", // text-gray-700
-            },
-            ".cm-gutters": {
-              backgroundColor: "#f9fafb", // bg-gray-50
-              color: "#9ca3af", // text-gray-400
-              borderRight: "1px solid #e5e7eb", // border-gray-200
-            },
-            ".cm-activeLineGutter": {
-              backgroundColor: "#e5e7eb",
-            },
-          },
-          { dark: false },
-        ),
-      );
+      extensions.unshift(oneDark);
     }
 
     // 创建初始状态
@@ -149,9 +161,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
   return (
     <div
       ref={editorRef}
-      className={`border rounded-md overflow-hidden ${
-        darkMode ? "border-gray-800" : "border-gray-200"
-      } ${className}`}
+      className={`overflow-hidden rounded-[calc(var(--radius)+0.125rem)] border border-border/80 bg-card/85 shadow-sm ${className}`}
     />
   );
 };
diff --git a/src/components/UpdateBadge.tsx b/src/components/UpdateBadge.tsx
index 04566a1bc7..46c1e21682 100644
--- a/src/components/UpdateBadge.tsx
+++ b/src/components/UpdateBadge.tsx
@@ -32,7 +32,7 @@ export function UpdateBadge({ className = "", onClick }: UpdateBadgeProps) {
       onClick={onClick}
       className={`
         relative h-8 w-8 rounded-full
-        ${isActive ? "text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-500/10" : "text-muted-foreground hover:bg-muted/60"}
+        ${isActive ? "text-primary hover:bg-primary/10" : "text-muted-foreground hover:bg-muted/60"}
         ${className}
       `}
     >
diff --git a/src/components/UsageFooter.tsx b/src/components/UsageFooter.tsx
index 9b0654e526..28b3a7039d 100644
--- a/src/components/UsageFooter.tsx
+++ b/src/components/UsageFooter.tsx
@@ -78,7 +78,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
     if (inline) {
       return (
         <div className="inline-flex items-center gap-2 text-xs rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
-          <div className="flex items-center gap-1.5 text-red-500 dark:text-red-400">
+          <div className="flex items-center gap-1.5 text-destructive">
             <AlertCircle size={12} />
             <span>{t("usage.queryFailed")}</span>
           </div>
@@ -97,7 +97,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
     return (
       <div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
         <div className="flex items-center justify-between gap-2 text-xs">
-          <div className="flex items-center gap-2 text-red-500 dark:text-red-400">
+          <div className="flex items-center gap-2 text-destructive">
             <AlertCircle size={14} />
             <span>{usage.error || t("usage.queryFailed")}</span>
           </div>
@@ -106,7 +106,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
           <button
             onClick={() => refetch()}
             disabled={loading}
-            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0"
+            className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
             title={t("usage.refreshUsage")}
           >
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
@@ -191,10 +191,8 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
           {/* 已用 */}
           {firstUsage.used !== undefined && (
             <div className="flex items-center gap-0.5">
-              <span className="text-gray-500 dark:text-gray-400">
-                {t("usage.used")}
-              </span>
-              <span className="tabular-nums text-gray-600 dark:text-gray-400 font-medium">
+              <span className="text-muted-foreground">{t("usage.used")}</span>
+              <span className="tabular-nums font-medium text-foreground/80">
                 {firstUsage.used.toFixed(2)}
               </span>
             </div>
@@ -203,17 +201,17 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
           {/* 剩余 */}
           {firstUsage.remaining !== undefined && (
             <div className="flex items-center gap-0.5">
-              <span className="text-gray-500 dark:text-gray-400">
+              <span className="text-muted-foreground">
                 {t("usage.remaining")}
               </span>
               <span
                 className={`font-semibold tabular-nums ${
                   isExpired
-                    ? "text-red-500 dark:text-red-400"
+                    ? "text-destructive"
                     : firstUsage.remaining <
                         (firstUsage.total || firstUsage.remaining) * 0.1
-                      ? "text-orange-500 dark:text-orange-400"
-                      : "text-green-600 dark:text-green-400"
+                      ? "text-[hsl(var(--warning))]"
+                      : "text-[hsl(var(--success))]"
                 }`}
               >
                 {firstUsage.remaining.toFixed(2)}
@@ -223,15 +221,13 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
 
           {/* 单位 */}
           {firstUsage.unit && (
-            <span className="text-gray-500 dark:text-gray-400">
-              {firstUsage.unit}
-            </span>
+            <span className="text-muted-foreground">{firstUsage.unit}</span>
           )}
 
           {/* 扩展字段 extra */}
           {firstUsage.extra && (
             <span
-              className="text-gray-500 dark:text-gray-400 truncate max-w-[150px]"
+              className="max-w-[150px] truncate text-muted-foreground"
               title={firstUsage.extra}
             >
               {firstUsage.extra}
@@ -246,7 +242,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
     <div className="mt-3 rounded-xl border border-border-default bg-card px-4 py-3 shadow-sm">
       {/* 标题行：包含刷新按钮和自动查询时间 */}
       <div className="flex items-center justify-between mb-2">
-        <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
+        <span className="text-xs font-medium text-muted-foreground">
           {t("usage.planUsage")}
         </span>
         <div className="flex items-center gap-2">
@@ -301,12 +297,12 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
     <div className="flex items-center gap-3">
       {/* 标题部分：25% */}
       <div
-        className="text-xs text-gray-500 dark:text-gray-400 min-w-0"
+        className="min-w-0 text-xs text-muted-foreground"
         style={{ width: "25%" }}
       >
         {planName ? (
           <span
-            className={`font-medium truncate block ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
+            className={`block truncate font-medium ${isExpired ? "text-destructive" : "text-foreground"}`}
             title={planName}
           >
             💰 {planName}
@@ -318,19 +314,19 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
 
       {/* 扩展字段：30% */}
       <div
-        className="text-xs text-gray-500 dark:text-gray-400 min-w-0 flex items-center gap-2"
+        className="min-w-0 flex items-center gap-2 text-xs text-muted-foreground"
         style={{ width: "30%" }}
       >
         {extra && (
           <span
-            className={`truncate ${isExpired ? "text-red-500 dark:text-red-400" : ""}`}
+            className={`truncate ${isExpired ? "text-destructive" : ""}`}
             title={extra}
           >
             {extra}
           </span>
         )}
         {isExpired && (
-          <span className="text-red-500 dark:text-red-400 font-medium text-[10px] px-1.5 py-0.5 bg-red-50 dark:bg-red-900/20 rounded flex-shrink-0">
+          <span className="flex-shrink-0 rounded border border-destructive/20 bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium text-destructive">
             {invalidMessage || t("usage.invalid")}
           </span>
         )}
@@ -344,42 +340,38 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
         {/* 总额度 */}
         {total !== undefined && (
           <>
-            <span className="text-gray-500 dark:text-gray-400">
-              {t("usage.total")}
-            </span>
-            <span className="tabular-nums text-gray-600 dark:text-gray-400">
+            <span className="text-muted-foreground">{t("usage.total")}</span>
+            <span className="tabular-nums text-foreground/80">
               {total === -1 ? "∞" : total.toFixed(2)}
             </span>
-            <span className="text-gray-400 dark:text-gray-600">|</span>
+            <span className="text-muted-foreground/50">|</span>
           </>
         )}
 
         {/* 已用额度 */}
         {used !== undefined && (
           <>
-            <span className="text-gray-500 dark:text-gray-400">
-              {t("usage.used")}
-            </span>
-            <span className="tabular-nums text-gray-600 dark:text-gray-400">
+            <span className="text-muted-foreground">{t("usage.used")}</span>
+            <span className="tabular-nums text-foreground/80">
               {used.toFixed(2)}
             </span>
-            <span className="text-gray-400 dark:text-gray-600">|</span>
+            <span className="text-muted-foreground/50">|</span>
           </>
         )}
 
         {/* 剩余额度 - 突出显示 */}
         {remaining !== undefined && (
           <>
-            <span className="text-gray-500 dark:text-gray-400">
+            <span className="text-muted-foreground">
               {t("usage.remaining")}
             </span>
             <span
               className={`font-semibold tabular-nums ${
                 isExpired
-                  ? "text-red-500 dark:text-red-400"
+                  ? "text-destructive"
                   : remaining < (total || remaining) * 0.1
-                    ? "text-orange-500 dark:text-orange-400"
-                    : "text-green-600 dark:text-green-400"
+                    ? "text-[hsl(var(--warning))]"
+                    : "text-[hsl(var(--success))]"
               }`}
             >
               {remaining.toFixed(2)}
@@ -387,9 +379,7 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
           </>
         )}
 
-        {unit && (
-          <span className="text-gray-500 dark:text-gray-400">{unit}</span>
-        )}
+        {unit && <span className="text-muted-foreground">{unit}</span>}
       </div>
     </div>
   );
diff --git a/src/components/UsageScriptModal.tsx b/src/components/UsageScriptModal.tsx
index a0d33b0778..815767b3c2 100644
--- a/src/components/UsageScriptModal.tsx
+++ b/src/components/UsageScriptModal.tsx
@@ -700,7 +700,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
       onClose={onClose}
       footer={footer}
     >
-      <div className="glass rounded-xl border border-white/10 px-6 py-4 flex items-center justify-between gap-4">
+      <div className="glass flex items-center justify-between gap-4 rounded-xl border border-border/50 px-6 py-4">
         <p className="text-base font-medium leading-none text-foreground">
           {t("usageScript.enableUsageQuery")}
         </p>
@@ -714,7 +714,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
       {script.enabled && (
         <div className="space-y-6">
           {/* 预设模板选择 */}
-          <div className="space-y-4 glass rounded-xl border border-white/10 p-6">
+          <div className="glass space-y-4 rounded-xl border border-border/50 p-6">
             <Label className="text-base font-medium">
               {t("usageScript.presetTemplate")}
             </Label>
@@ -754,14 +754,14 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
             {/* 自定义模式：变量提示和具体值 */}
             {selectedTemplate === TEMPLATE_TYPES.CUSTOM && (
-              <div className="space-y-2 border-t border-white/10 pt-3">
+              <div className="space-y-2 border-t border-border/50 pt-3">
                 <h4 className="text-sm font-medium text-foreground">
                   {t("usageScript.supportedVariables")}
                 </h4>
                 <div className="space-y-1 text-xs">
                   {/* baseUrl */}
                   <div className="flex items-center gap-2 py-1">
-                    <code className="text-emerald-500 dark:text-emerald-400 font-mono shrink-0">
+                    <code className="text-primary font-mono shrink-0">
                       {"{{baseUrl}}"}
                     </code>
                     <span className="text-muted-foreground/50">=</span>
@@ -778,7 +778,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
                   {/* apiKey */}
                   <div className="flex items-center gap-2 py-1">
-                    <code className="text-emerald-500 dark:text-emerald-400 font-mono shrink-0">
+                    <code className="text-primary font-mono shrink-0">
                       {"{{apiKey}}"}
                     </code>
                     <span className="text-muted-foreground/50">=</span>
@@ -822,7 +822,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
 
             {/* Copilot 模式：自动认证提示 */}
             {selectedTemplate === TEMPLATE_TYPES.GITHUB_COPILOT && (
-              <div className="space-y-2 border-t border-white/10 pt-3">
+              <div className="space-y-2 border-t border-border/50 pt-3">
                 <p className="text-sm text-muted-foreground">
                   {t("usageScript.copilotAutoAuth")}
                 </p>
@@ -919,7 +919,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                             }
                             placeholder={t("usageScript.apiKeyPlaceholder")}
                             autoComplete="off"
-                            className="border-white/10"
+                            className="border-border/60"
                           />
                           {script.apiKey && (
                             <button
@@ -958,7 +958,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder={t("usageScript.baseUrlPlaceholder")}
                           autoComplete="off"
-                          className="border-white/10"
+                          className="border-border/60"
                         />
                       </div>
                     </>
@@ -979,7 +979,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder="https://api.newapi.com"
                           autoComplete="off"
-                          className="border-white/10"
+                          className="border-border/60"
                         />
                       </div>
 
@@ -1002,7 +1002,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                               "usageScript.accessTokenPlaceholder",
                             )}
                             autoComplete="off"
-                            className="border-white/10"
+                            className="border-border/60"
                           />
                           {script.accessToken && (
                             <button
@@ -1040,7 +1040,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                           }
                           placeholder={t("usageScript.userIdPlaceholder")}
                           autoComplete="off"
-                          className="border-white/10"
+                          className="border-border/60"
                         />
                       </div>
                     </>
@@ -1050,7 +1050,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
             )}
 
             {/* 通用配置（始终显示） */}
-            <div className="grid gap-4 md:grid-cols-2 pt-4 border-t border-white/10">
+            <div className="grid gap-4 border-t border-border/50 pt-4 md:grid-cols-2">
               {/* 超时时间 */}
               <div className="space-y-2">
                 <Label htmlFor="usage-timeout">
@@ -1076,7 +1076,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                       timeout: validateTimeout(e.target.value),
                     })
                   }
-                  className="border-white/10"
+                  className="border-border/60"
                 />
               </div>
 
@@ -1110,7 +1110,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
                       ),
                     })
                   }
-                  className="border-white/10"
+                  className="border-border/60"
                 />
               </div>
             </div>
@@ -1119,7 +1119,7 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
           {/* 提取器代码 - Copilot 模板不需要 */}
           {selectedTemplate !== TEMPLATE_TYPES.GITHUB_COPILOT &&
             selectedTemplate !== TEMPLATE_TYPES.TOKEN_PLAN && (
-              <div className="space-y-4 glass rounded-xl border border-white/10 p-6">
+              <div className="glass space-y-4 rounded-xl border border-border/50 p-6">
                 <div className="flex items-center justify-between">
                   <Label className="text-base font-medium">
                     {t("usageScript.extractorCode")}
@@ -1144,14 +1144,14 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
           {/* 帮助信息 - Copilot 模板不需要 */}
           {selectedTemplate !== TEMPLATE_TYPES.GITHUB_COPILOT &&
             selectedTemplate !== TEMPLATE_TYPES.TOKEN_PLAN && (
-              <div className="glass rounded-xl border border-white/10 p-6 text-sm text-foreground/90">
+              <div className="glass rounded-xl border border-border/50 p-6 text-sm text-foreground/90">
                 <h4 className="font-medium mb-2">
                   {t("usageScript.scriptHelp")}
                 </h4>
                 <div className="space-y-3 text-xs">
                   <div>
                     <strong>{t("usageScript.configFormat")}</strong>
-                    <pre className="mt-1 p-2 bg-black/20 text-foreground rounded border border-white/10 text-[10px] overflow-x-auto">
+                    <pre className="mt-1 overflow-x-auto rounded border border-border/60 bg-muted/60 p-2 text-[10px] text-foreground">
                       {`({
   request: {
     url: "{{baseUrl}}/api/usage",
diff --git a/src/components/agents/AgentsPanel.tsx b/src/components/agents/AgentsPanel.tsx
index 7a0f61c9da..2cf43bf9c9 100644
--- a/src/components/agents/AgentsPanel.tsx
+++ b/src/components/agents/AgentsPanel.tsx
@@ -8,7 +8,7 @@ export function AgentsPanel({}: AgentsPanelProps) {
   return (
     <div className="px-6 flex flex-col flex-1 min-h-0">
       <div className="flex-1 glass-card rounded-xl p-8 flex flex-col items-center justify-center text-center space-y-4">
-        <div className="w-20 h-20 rounded-full bg-white/5 flex items-center justify-center mb-4 animate-pulse-slow">
+        <div className="mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-background/65 ring-1 ring-border animate-pulse-slow">
           <Bot className="w-10 h-10 text-muted-foreground" />
         </div>
         <h3 className="text-xl font-semibold">Coming Soon</h3>
diff --git a/src/components/common/AppCountBar.tsx b/src/components/common/AppCountBar.tsx
index 4e80998ab9..cb6d6e5314 100644
--- a/src/components/common/AppCountBar.tsx
+++ b/src/components/common/AppCountBar.tsx
@@ -15,7 +15,7 @@ export const AppCountBar: React.FC<AppCountBarProps> = ({
   appIds = APP_IDS,
 }) => {
   return (
-    <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6 flex items-center justify-between gap-4">
+    <div className="glass mb-4 flex-shrink-0 flex items-center justify-between gap-4 rounded-xl border border-border/50 px-6 py-4">
       <Badge variant="outline" className="bg-background/50 h-7 px-3">
         {totalLabel}
       </Badge>
diff --git a/src/components/deeplink/McpConfirmation.tsx b/src/components/deeplink/McpConfirmation.tsx
index c2fb9074b8..8b87a6b0a7 100644
--- a/src/components/deeplink/McpConfirmation.tsx
+++ b/src/components/deeplink/McpConfirmation.tsx
@@ -65,7 +65,7 @@ export function McpConfirmation({
       </div>
 
       {request.enabled && (
-        <div className="text-yellow-600 dark:text-yellow-500 text-sm flex items-center gap-2">
+        <div className="text-sm flex items-center gap-2 text-[hsl(var(--warning))]">
           <span>⚠️</span>
           <span>{t("deeplink.mcp.enabledWarning")}</span>
         </div>
diff --git a/src/components/deeplink/PromptConfirmation.tsx b/src/components/deeplink/PromptConfirmation.tsx
index 3efd72b85c..51145e56b8 100644
--- a/src/components/deeplink/PromptConfirmation.tsx
+++ b/src/components/deeplink/PromptConfirmation.tsx
@@ -53,7 +53,7 @@ export function PromptConfirmation({
       </div>
 
       {request.enabled && (
-        <div className="text-yellow-600 dark:text-yellow-500 text-sm flex items-center gap-2">
+        <div className="text-sm flex items-center gap-2 text-[hsl(var(--warning))]">
           <span>⚠️</span>
           <span>{t("deeplink.prompt.enabledWarning")}</span>
         </div>
diff --git a/src/components/deeplink/SkillConfirmation.tsx b/src/components/deeplink/SkillConfirmation.tsx
index 40b2fa8ac6..74f7c92aa4 100644
--- a/src/components/deeplink/SkillConfirmation.tsx
+++ b/src/components/deeplink/SkillConfirmation.tsx
@@ -37,7 +37,7 @@ export function SkillConfirmation({
         <div className="mt-1 text-sm">{request.branch || "main"}</div>
       </div>
 
-      <div className="text-blue-600 dark:text-blue-400 text-sm bg-blue-50 dark:bg-blue-950/30 p-3 rounded border border-blue-200 dark:border-blue-800">
+      <div className="text-primary text-sm bg-primary/10 p-3 rounded border border-primary/20">
         <p>ℹ️ {t("deeplink.skill.hint")}</p>
         <p className="mt-1">{t("deeplink.skill.hintDetail")}</p>
       </div>
diff --git a/src/components/env/EnvWarningBanner.tsx b/src/components/env/EnvWarningBanner.tsx
index da31ce9290..4cc257d84e 100644
--- a/src/components/env/EnvWarningBanner.tsx
+++ b/src/components/env/EnvWarningBanner.tsx
@@ -111,18 +111,20 @@ export function EnvWarningBanner({
 
   return (
     <>
-      <div className="fixed top-0 left-0 right-0 z-[100] bg-yellow-50 dark:bg-yellow-950 border-b border-yellow-200 dark:border-yellow-900 shadow-lg animate-slide-down">
+      <div className="fixed left-0 right-0 top-0 z-[100] animate-slide-down border-b border-border/80 bg-background/95 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/85">
         <div className="container mx-auto px-4 py-3">
           <div className="flex items-start gap-3">
-            <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
+            <div className="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl border border-border/70 bg-accent/45">
+              <AlertTriangle className="h-5 w-5 text-accent-foreground" />
+            </div>
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between gap-3">
                 <div>
-                  <h3 className="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
+                  <h3 className="text-sm font-semibold text-foreground">
                     {t("env.warning.title")}
                   </h3>
-                  <p className="text-sm text-yellow-800 dark:text-yellow-200 mt-0.5">
+                  <p className="mt-0.5 text-sm text-muted-foreground">
                     {t("env.warning.description", { count: conflicts.length })}
                   </p>
                 </div>
@@ -132,7 +134,7 @@ export function EnvWarningBanner({
                     variant="ghost"
                     size="sm"
                     onClick={() => setIsExpanded(!isExpanded)}
-                    className="text-yellow-900 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-900/50"
+                    className="text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   >
                     {isExpanded ? (
                       <>
@@ -151,7 +153,7 @@ export function EnvWarningBanner({
                     variant="ghost"
                     size="icon"
                     onClick={onDismiss}
-                    className="text-yellow-900 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-900/50"
+                    className="text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   >
                     <X className="h-4 w-4" />
                   </Button>
@@ -160,7 +162,7 @@ export function EnvWarningBanner({
 
               {isExpanded && (
                 <div className="mt-4 space-y-3">
-                  <div className="flex items-center gap-2 pb-2 border-b border-yellow-200 dark:border-yellow-900/50">
+                  <div className="flex items-center gap-2 border-b border-border pb-2">
                     <Checkbox
                       id="select-all"
                       checked={selectedConflicts.size === conflicts.length}
@@ -168,7 +170,7 @@ export function EnvWarningBanner({
                     />
                     <label
                       htmlFor="select-all"
-                      className="text-sm font-medium text-yellow-900 dark:text-yellow-100 cursor-pointer"
+                      className="cursor-pointer text-sm font-medium text-foreground"
                     >
                       {t("env.actions.selectAll")}
                     </label>
@@ -180,7 +182,7 @@ export function EnvWarningBanner({
                       return (
                         <div
                           key={key}
-                          className="flex items-start gap-3 p-3 bg-white dark:bg-gray-900 rounded-md border border-yellow-200 dark:border-yellow-900/50"
+                          className="flex items-start gap-3 rounded-xl border border-border/70 bg-card/70 p-3 shadow-sm"
                         >
                           <Checkbox
                             id={key}
@@ -208,13 +210,12 @@ export function EnvWarningBanner({
                     })}
                   </div>
 
-                  <div className="flex items-center justify-end gap-2 pt-2 border-t border-yellow-200 dark:border-yellow-900/50">
+                  <div className="flex items-center justify-end gap-2 border-t border-border pt-2">
                     <Button
                       variant="outline"
                       size="sm"
                       onClick={() => setSelectedConflicts(new Set())}
                       disabled={selectedConflicts.size === 0}
-                      className="text-yellow-900 dark:text-yellow-100 border-yellow-300 dark:border-yellow-800"
                     >
                       {t("env.actions.clearSelection")}
                     </Button>
diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 70ab3b03a0..e34e8d2f88 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -435,7 +435,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
       >
         <div className="flex flex-col h-full gap-6">
           {/* 上半部分：表单字段 */}
-          <div className="glass rounded-xl p-6 border border-white/10 space-y-6 flex-shrink-0">
+          <div className="glass flex-shrink-0 space-y-6 rounded-xl border border-border/50 p-6">
             {/* 预设选择（仅新增时展示） */}
             {!isEditing && (
               <div>
@@ -448,7 +448,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                     onClick={applyCustom}
                     className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                       selectedPreset === -1
-                        ? "bg-emerald-500 text-white dark:bg-emerald-600"
+                        ? "bg-primary text-primary-foreground"
                         : "bg-accent text-muted-foreground hover:bg-accent/80"
                     }`}
                   >
@@ -463,7 +463,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                         onClick={() => applyPreset(idx)}
                         className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                           selectedPreset === idx
-                            ? "bg-emerald-500 text-white dark:bg-emerald-600"
+                            ? "bg-primary text-primary-foreground"
                             : "bg-accent text-muted-foreground hover:bg-accent/80"
                         }`}
                         title={t(descriptionKey)}
@@ -480,10 +480,11 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
             <div>
               <div className="flex items-center justify-between mb-2">
                 <label className="block text-sm font-medium text-foreground">
-                  {t("mcp.form.title")} <span className="text-red-500">*</span>
+                  {t("mcp.form.title")}{" "}
+                  <span className="text-[hsl(var(--destructive))]">*</span>
                 </label>
                 {!isEditing && idError && (
-                  <span className="text-xs text-red-500 dark:text-red-400">
+                  <span className="text-xs text-[hsl(var(--destructive))]">
                     {idError}
                   </span>
                 )}
@@ -653,7 +654,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
           </div>
 
           {/* 下半部分：JSON 配置编辑器 - 自适应剩余高度 */}
-          <div className="glass rounded-xl p-6 border border-white/10 flex flex-col flex-1 min-h-0">
+          <div className="glass flex min-h-0 flex-1 flex-col rounded-xl border border-border/50 p-6">
             <div className="flex items-center justify-between mb-4 flex-shrink-0">
               <label className="text-sm font-medium text-foreground">
                 {useToml ? t("mcp.form.tomlConfig") : t("mcp.form.jsonConfig")}
@@ -662,7 +663,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 <button
                   type="button"
                   onClick={() => setIsWizardOpen(true)}
-                  className="text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors"
+                  className="text-sm text-primary hover:text-primary/80 transition-colors"
                 >
                   {t("mcp.form.useWizard")}
                 </button>
@@ -686,7 +687,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 />
               </div>
               {configError && (
-                <div className="flex items-center gap-2 mt-2 text-red-500 dark:text-red-400 text-sm flex-shrink-0">
+                <div className="flex items-center gap-2 mt-2 text-[hsl(var(--destructive))] text-sm flex-shrink-0">
                   <AlertCircle size={16} />
                   <span>{configError}</span>
                 </div>
diff --git a/src/components/mcp/McpWizardModal.tsx b/src/components/mcp/McpWizardModal.tsx
index a5cf5de2c8..29c1c571a3 100644
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -238,7 +238,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
         {/* Content */}
         <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
           {/* Hint */}
-          <div className="rounded-lg border border-border-default bg-gray-100/50 dark:bg-gray-800/50 p-3">
+          <div className="rounded-lg border border-border-default bg-muted/40 p-3">
             <p className="text-sm text-muted-foreground">
               {t("mcp.wizard.hint")}
             </p>
@@ -249,58 +249,47 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
             {/* Type */}
             <div>
               <label className="mb-2 block text-sm font-medium text-foreground">
-                {t("mcp.wizard.type")} <span className="text-red-500">*</span>
+                {t("mcp.wizard.type")}{" "}
+                <span className="text-destructive">*</span>
               </label>
-              <div className="flex gap-4">
-                <label className="inline-flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="radio"
-                    value="stdio"
-                    checked={wizardType === "stdio"}
-                    onChange={(e) =>
-                      setWizardType(e.target.value as "stdio" | "http" | "sse")
-                    }
-                    className="w-4 h-4 accent-blue-500"
-                  />
-                  <span className="text-sm text-foreground">
-                    {t("mcp.wizard.typeStdio")}
-                  </span>
-                </label>
-                <label className="inline-flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="radio"
-                    value="http"
-                    checked={wizardType === "http"}
-                    onChange={(e) =>
-                      setWizardType(e.target.value as "stdio" | "http" | "sse")
-                    }
-                    className="w-4 h-4 accent-blue-500"
-                  />
-                  <span className="text-sm text-foreground">
-                    {t("mcp.wizard.typeHttp")}
-                  </span>
-                </label>
-                <label className="inline-flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="radio"
-                    value="sse"
-                    checked={wizardType === "sse"}
-                    onChange={(e) =>
-                      setWizardType(e.target.value as "stdio" | "http" | "sse")
-                    }
-                    className="w-4 h-4 accent-blue-500"
-                  />
-                  <span className="text-sm text-foreground">
-                    {t("mcp.wizard.typeSse")}
-                  </span>
-                </label>
+              <div
+                className="flex gap-3"
+                role="radiogroup"
+                aria-label={t("mcp.wizard.type")}
+              >
+                {(
+                  [
+                    ["stdio", t("mcp.wizard.typeStdio")],
+                    ["http", t("mcp.wizard.typeHttp")],
+                    ["sse", t("mcp.wizard.typeSse")],
+                  ] as const
+                ).map(([type, label]) => {
+                  const isSelected = wizardType === type;
+                  return (
+                    <Button
+                      key={type}
+                      type="button"
+                      variant={isSelected ? "default" : "outline"}
+                      size="sm"
+                      role="radio"
+                      aria-checked={isSelected}
+                      onClick={() =>
+                        setWizardType(type as "stdio" | "http" | "sse")
+                      }
+                      className="min-w-24"
+                    >
+                      {label}
+                    </Button>
+                  );
+                })}
               </div>
             </div>
 
             {/* Title */}
             <div>
               <label className="mb-1 block text-sm font-medium text-foreground">
-                {t("mcp.form.title")} <span className="text-red-500">*</span>
+                {t("mcp.form.title")}{" "}
+                <span className="text-[hsl(var(--destructive))]">*</span>
               </label>
               <Input
                 type="text"
@@ -319,7 +308,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                 <div>
                   <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.command")}{" "}
-                    <span className="text-red-500">*</span>
+                    <span className="text-[hsl(var(--destructive))]">*</span>
                   </label>
                   <Input
                     type="text"
@@ -341,7 +330,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardArgs(e.target.value)}
                     placeholder={t("mcp.wizard.argsPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 resize-y"
                   />
                 </div>
 
@@ -355,7 +344,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardEnv(e.target.value)}
                     placeholder={t("mcp.wizard.envPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 resize-y"
                   />
                 </div>
               </>
@@ -368,7 +357,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                 <div>
                   <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.url")}{" "}
-                    <span className="text-red-500">*</span>
+                    <span className="text-[hsl(var(--destructive))]">*</span>
                   </label>
                   <Input
                     type="text"
@@ -390,7 +379,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardHeaders(e.target.value)}
                     placeholder={t("mcp.wizard.headersPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 resize-y"
                   />
                 </div>
               </>
@@ -407,7 +396,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
               <h3 className="text-sm font-medium text-foreground">
                 {t("mcp.wizard.preview")}
               </h3>
-              <pre className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800 p-3 text-xs font-mono text-gray-700 dark:text-gray-300">
+              <pre className="overflow-x-auto rounded-lg border border-border/60 bg-muted/60 p-3 text-xs font-mono text-foreground/80">
                 {preview}
               </pre>
             </div>
diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index 761ddcd651..71619ff39e 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -296,7 +296,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
           type="button"
           variant="ghost"
           size="icon"
-          className="h-7 w-7 hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+          className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
           onClick={() => onDelete(id)}
           title={t("common.delete")}
         >
diff --git a/src/components/openclaw/AgentsDefaultsPanel.tsx b/src/components/openclaw/AgentsDefaultsPanel.tsx
index 2a334a5c22..0fcd13d05e 100644
--- a/src/components/openclaw/AgentsDefaultsPanel.tsx
+++ b/src/components/openclaw/AgentsDefaultsPanel.tsx
@@ -203,7 +203,7 @@ const AgentsDefaultsPanel: React.FC = () => {
       </p>
 
       {hasLegacyTimeout && (
-        <Alert className="mb-4 border-amber-500/30 bg-amber-500/5">
+        <Alert className="mb-4 border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.08)] text-[hsl(var(--warning))]">
           <TriangleAlert className="h-4 w-4" />
           <AlertTitle>
             {t("openclaw.agents.legacyTimeoutTitle", {
diff --git a/src/components/openclaw/OpenClawHealthBanner.tsx b/src/components/openclaw/OpenClawHealthBanner.tsx
index 2abcc6f471..b7e3547c10 100644
--- a/src/components/openclaw/OpenClawHealthBanner.tsx
+++ b/src/components/openclaw/OpenClawHealthBanner.tsx
@@ -64,7 +64,7 @@ const OpenClawHealthBanner: React.FC<OpenClawHealthBannerProps> = ({
 
   return (
     <div className="px-6 pt-4">
-      <Alert className="border-amber-500/30 bg-amber-500/5">
+      <Alert className="border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.08)] text-[hsl(var(--warning))]">
         <TriangleAlert className="h-4 w-4" />
         <AlertTitle>
           {t("openclaw.health.title", {
diff --git a/src/components/openclaw/ToolsPanel.tsx b/src/components/openclaw/ToolsPanel.tsx
index 5d8ec09d29..9cdf731127 100644
--- a/src/components/openclaw/ToolsPanel.tsx
+++ b/src/components/openclaw/ToolsPanel.tsx
@@ -129,7 +129,7 @@ const ToolsPanel: React.FC = () => {
       </p>
 
       {unsupportedProfile && (
-        <Alert className="mb-6 border-amber-500/30 bg-amber-500/5">
+        <Alert className="mb-6 border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.08)] text-[hsl(var(--warning))]">
           <TriangleAlert className="h-4 w-4" />
           <AlertTitle>
             {t("openclaw.tools.unsupportedProfileTitle", {
diff --git a/src/components/prompts/PromptFormPanel.tsx b/src/components/prompts/PromptFormPanel.tsx
index c4481fa4cf..c3235fa5c3 100644
--- a/src/components/prompts/PromptFormPanel.tsx
+++ b/src/components/prompts/PromptFormPanel.tsx
@@ -108,7 +108,7 @@ const PromptFormPanel: React.FC<PromptFormPanelProps> = ({
         </Button>
       }
     >
-      <div className="glass rounded-xl p-6 border border-white/10 space-y-6">
+      <div className="glass space-y-6 rounded-xl border border-border/50 p-6">
         <div>
           <Label htmlFor="name" className="text-foreground">
             {t("prompts.name")}
diff --git a/src/components/prompts/PromptListItem.tsx b/src/components/prompts/PromptListItem.tsx
index 0c84e2620b..a7fd7ffc63 100644
--- a/src/components/prompts/PromptListItem.tsx
+++ b/src/components/prompts/PromptListItem.tsx
@@ -59,7 +59,7 @@ const PromptListItem: React.FC<PromptListItemProps> = ({
             variant="ghost"
             size="icon"
             onClick={() => onDelete(id)}
-            className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+            className="hover:bg-destructive/10 hover:text-destructive"
             title={t("common.delete")}
           >
             <Trash2 size={16} />
diff --git a/src/components/prompts/PromptPanel.tsx b/src/components/prompts/PromptPanel.tsx
index 77e4edb034..5d1a4816fc 100644
--- a/src/components/prompts/PromptPanel.tsx
+++ b/src/components/prompts/PromptPanel.tsx
@@ -97,7 +97,7 @@ const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
 
     return (
       <div className="flex flex-col flex-1 min-h-0 px-6">
-        <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
+        <div className="glass mb-4 flex-shrink-0 rounded-xl border border-border/50 px-6 py-4">
           <div className="text-sm text-muted-foreground">
             {t("prompts.count", { count: promptEntries.length })} ·{" "}
             {enabledPrompt
diff --git a/src/components/prompts/PromptToggle.tsx b/src/components/prompts/PromptToggle.tsx
index e2834c62ce..67c6fe5b66 100644
--- a/src/components/prompts/PromptToggle.tsx
+++ b/src/components/prompts/PromptToggle.tsx
@@ -8,7 +8,7 @@ interface PromptToggleProps {
 
 /**
  * Toggle 开关组件（提示词专用）
- * 启用时为绿色，禁用时为灰色
+ * 跟随主题主色与 muted token
  */
 const PromptToggle: React.FC<PromptToggleProps> = ({
   enabled,
@@ -23,14 +23,14 @@ const PromptToggle: React.FC<PromptToggleProps> = ({
       disabled={disabled}
       onClick={() => onChange(!enabled)}
       className={`
-        relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500/20
-        ${enabled ? "bg-emerald-500 dark:bg-emerald-600" : "bg-gray-300 dark:bg-gray-600"}
+        relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ring/20
+        ${enabled ? "bg-primary" : "bg-muted"}
         ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
       `}
     >
       <span
         className={`
-          inline-block h-4 w-4 transform rounded-full bg-white transition-transform
+          inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform
           ${enabled ? "translate-x-6" : "translate-x-1"}
         `}
       />
diff --git a/src/components/providers/FailoverPriorityBadge.tsx b/src/components/providers/FailoverPriorityBadge.tsx
index d7824c3186..d1726edac1 100644
--- a/src/components/providers/FailoverPriorityBadge.tsx
+++ b/src/components/providers/FailoverPriorityBadge.tsx
@@ -20,7 +20,7 @@ export function FailoverPriorityBadge({
     <div
       className={cn(
         "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold",
-        "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+        "bg-primary/10 text-primary",
         className,
       )}
       title={t("failover.priority.tooltip", {
diff --git a/src/components/providers/HealthStatusIndicator.tsx b/src/components/providers/HealthStatusIndicator.tsx
index 0fd319f2c5..44eefc53fd 100644
--- a/src/components/providers/HealthStatusIndicator.tsx
+++ b/src/components/providers/HealthStatusIndicator.tsx
@@ -11,22 +11,19 @@ interface HealthStatusIndicatorProps {
 
 const statusConfig = {
   operational: {
-    color: "bg-emerald-500",
     labelKey: "health.operational",
     labelFallback: "正常",
-    textColor: "text-emerald-600 dark:text-emerald-400",
+    color: "hsl(var(--success))",
   },
   degraded: {
-    color: "bg-yellow-500",
     labelKey: "health.degraded",
     labelFallback: "降级",
-    textColor: "text-yellow-600 dark:text-yellow-400",
+    color: "hsl(var(--warning))",
   },
   failed: {
-    color: "bg-red-500",
     labelKey: "health.failed",
     labelFallback: "失败",
-    textColor: "text-red-600 dark:text-red-400",
+    color: "hsl(var(--destructive))",
   },
 };
 
@@ -41,8 +38,11 @@ export const HealthStatusIndicator: React.FC<HealthStatusIndicatorProps> = ({
 
   return (
     <div className={cn("flex items-center gap-2", className)}>
-      <div className={cn("w-2 h-2 rounded-full", config.color)} />
-      <span className={cn("text-xs font-medium", config.textColor)}>
+      <div
+        className="w-2 h-2 rounded-full"
+        style={{ backgroundColor: config.color }}
+      />
+      <span className="text-xs font-medium" style={{ color: config.color }}>
         {label}
         {responseTimeMs !== undefined && ` (${responseTimeMs}ms)`}
       </span>
diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 98db9307d7..353b8e508d 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -107,7 +107,7 @@ export function ProviderActions({
           disabled: false,
           variant: "secondary" as const,
           className:
-            "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
+            "bg-secondary text-secondary-foreground hover:bg-secondary hover:text-secondary-foreground",
           icon: <Check className="h-4 w-4" />,
           text: t("provider.inUse"),
         };
@@ -128,7 +128,7 @@ export function ProviderActions({
           disabled: isDefaultModel === true,
           variant: "secondary" as const,
           className: cn(
-            "bg-orange-100 text-orange-600 hover:bg-orange-200 dark:bg-orange-900/50 dark:text-orange-400 dark:hover:bg-orange-900/70",
+            "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             isDefaultModel && "opacity-40 cursor-not-allowed",
           ),
           icon: <Minus className="h-4 w-4" />,
@@ -138,8 +138,7 @@ export function ProviderActions({
       return {
         disabled: false,
         variant: "default" as const,
-        className:
-          "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
+        className: "bg-primary hover:bg-primary/90",
         icon: <Plus className="h-4 w-4" />,
         text: t("provider.addToConfig", { defaultValue: "添加" }),
       };
@@ -151,7 +150,7 @@ export function ProviderActions({
           disabled: false,
           variant: "secondary" as const,
           className:
-            "bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-900/50 dark:text-blue-400 dark:hover:bg-blue-900/70",
+            "bg-primary/10 text-primary hover:bg-primary/15 dark:text-primary",
           icon: <Check className="h-4 w-4" />,
           text: t("failover.inQueue", { defaultValue: "已加入" }),
         };
@@ -159,8 +158,7 @@ export function ProviderActions({
       return {
         disabled: false,
         variant: "default" as const,
-        className:
-          "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        className: "bg-primary hover:bg-primary/90",
         icon: <Plus className="h-4 w-4" />,
         text: t("failover.addQueue", { defaultValue: "加入" }),
       };
@@ -171,7 +169,7 @@ export function ProviderActions({
         disabled: true,
         variant: "secondary" as const,
         className:
-          "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
+          "bg-secondary text-secondary-foreground hover:bg-secondary hover:text-secondary-foreground",
         icon: <Check className="h-4 w-4" />,
         text: t("provider.inUse"),
       };
@@ -180,9 +178,7 @@ export function ProviderActions({
     return {
       disabled: false,
       variant: "default" as const,
-      className: isProxyTakeover
-        ? "bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-        : "",
+      className: isProxyTakeover ? "bg-primary hover:bg-primary/90" : "",
       icon: <Play className="h-4 w-4" />,
       text: t("provider.enable"),
     };
@@ -203,8 +199,8 @@ export function ProviderActions({
           className={cn(
             "w-fit px-2.5",
             isDefaultModel
-              ? "bg-gray-200 text-muted-foreground dark:bg-gray-700 opacity-60 cursor-not-allowed"
-              : "bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+              ? "bg-secondary text-secondary-foreground opacity-60 cursor-not-allowed"
+              : "bg-primary hover:bg-primary/90",
           )}
         >
           <Zap className="h-4 w-4" />
@@ -284,10 +280,7 @@ export function ProviderActions({
             variant="ghost"
             onClick={onOpenTerminal}
             title={t("provider.openTerminal", "打开终端")}
-            className={cn(
-              iconButtonClass,
-              "hover:text-emerald-600 dark:hover:text-emerald-400",
-            )}
+            className={cn(iconButtonClass, "hover:text-primary")}
           >
             <Terminal className="h-4 w-4" />
           </Button>
@@ -300,7 +293,7 @@ export function ProviderActions({
           title={t("common.delete")}
           className={cn(
             iconButtonClass,
-            canDelete && "hover:text-red-500 dark:hover:text-red-400",
+            canDelete && "hover:text-destructive",
             !canDelete && "opacity-40 cursor-not-allowed text-muted-foreground",
           )}
         >
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index e85973e5b6..b171235f4f 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState, useEffect, useRef } from "react";
 import { GripVertical, ChevronDown, ChevronUp } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type {
@@ -200,6 +200,8 @@ export function ProviderCard({
     usage?.success && usage.data && usage.data.length > 1 && !isTokenPlan;
 
   const [isExpanded, setIsExpanded] = useState(false);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [actionsWidth, setActionsWidth] = useState(0);
 
   useEffect(() => {
     if (hasMultiplePlans) {
@@ -207,6 +209,18 @@ export function ProviderCard({
     }
   }, [hasMultiplePlans]);
 
+  useEffect(() => {
+    if (actionsRef.current) {
+      const updateWidth = () => {
+        const width = actionsRef.current?.offsetWidth || 0;
+        setActionsWidth(width);
+      };
+      updateWidth();
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+  }, [onTest, onOpenTerminal]);
+
   const handleOpenWebsite = () => {
     if (!isClickableUrl) {
       return;
@@ -244,11 +258,11 @@ export function ProviderCard({
         "relative overflow-hidden rounded-xl border border-border p-4 transition-all duration-300",
         "bg-card text-card-foreground group",
         isAutoFailoverEnabled || isProxyTakeover
-          ? "hover:border-emerald-500/50"
+          ? "hover:border-primary/50"
           : "hover:border-border-active",
         shouldUseGreen &&
-          "border-emerald-500/60 shadow-sm shadow-emerald-500/10",
-        shouldUseBlue && "border-blue-500/60 shadow-sm shadow-blue-500/10",
+          "border-[hsl(var(--success))]/60 shadow-sm shadow-[hsl(var(--success))/0.10]",
+        shouldUseBlue && "border-primary/60 shadow-sm shadow-primary/10",
         !(isActiveProvider || hasPersistentConfigHighlight) &&
           "hover:shadow-sm",
         dragHandleProps?.isDragging &&
@@ -258,8 +272,8 @@ export function ProviderCard({
       <div
         className={cn(
           "absolute inset-0 bg-gradient-to-r to-transparent transition-opacity duration-500 pointer-events-none",
-          shouldUseGreen && "from-emerald-500/10",
-          shouldUseBlue && "from-blue-500/10",
+          shouldUseGreen && "from-[hsl(var(--success))/0.10]",
+          shouldUseBlue && "from-primary/10",
           !shouldUseGreen && !shouldUseBlue && "from-primary/10",
           isActiveProvider || hasPersistentConfigHighlight
             ? "opacity-100"
@@ -298,13 +312,13 @@ export function ProviderCard({
               </h3>
 
               {isOmo && (
-                <span className="inline-flex items-center rounded-md bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-700 dark:bg-violet-900/40 dark:text-violet-300">
+                <span className="inline-flex items-center rounded-md border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
                   OMO
                 </span>
               )}
 
               {isOmoSlim && (
-                <span className="inline-flex items-center rounded-md bg-indigo-100 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">
+                <span className="inline-flex items-center rounded-md border border-secondary/70 bg-secondary px-1.5 py-0.5 text-[10px] font-semibold text-secondary-foreground">
                   Slim
                 </span>
               )}
@@ -324,7 +338,7 @@ export function ProviderCard({
               {provider.category === "third_party" &&
                 provider.meta?.isPartner && (
                   <span
-                    className="text-yellow-500 dark:text-yellow-400"
+                    className="text-accent-foreground"
                     title={t("provider.officialPartner", {
                       defaultValue: "官方合作伙伴",
                     })}
@@ -341,7 +355,7 @@ export function ProviderCard({
                 className={cn(
                   "inline-flex items-center text-sm max-w-[280px]",
                   isClickableUrl
-                    ? "text-blue-500 transition-colors hover:underline dark:text-blue-400 cursor-pointer"
+                    ? "text-primary transition-colors hover:underline cursor-pointer"
                     : "text-muted-foreground cursor-default",
                 )}
                 title={displayUrl}
@@ -353,9 +367,16 @@ export function ProviderCard({
           </div>
         </div>
 
-        <div className="flex items-center ml-auto min-w-0 gap-3">
+        <div
+          className="relative flex items-center ml-auto min-w-0 gap-3"
+          style={
+            {
+              "--actions-width": `${actionsWidth || 320}px`,
+            } as React.CSSProperties
+          }
+        >
           <div className="ml-auto">
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-1 transition-transform duration-200 group-hover:-translate-x-[var(--actions-width)] group-focus-within:-translate-x-[var(--actions-width)]">
               {isCopilot ? (
                 <CopilotQuotaFooter
                   meta={provider.meta}
@@ -375,7 +396,7 @@ export function ProviderCard({
                   isCurrent={isCurrent}
                 />
               ) : hasMultiplePlans ? (
-                <div className="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                   <span className="font-medium">
                     {t("usage.multiplePlans", {
                       count: usage?.data?.length || 0,
@@ -400,7 +421,7 @@ export function ProviderCard({
                     e.stopPropagation();
                     setIsExpanded(!isExpanded);
                   }}
-                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-500 dark:text-gray-400 flex-shrink-0"
+                  className="p-1 rounded hover:bg-accent transition-colors text-muted-foreground flex-shrink-0"
                   title={
                     isExpanded
                       ? t("usage.collapse", { defaultValue: "收起" })
@@ -417,7 +438,10 @@ export function ProviderCard({
             </div>
           </div>
 
-          <div className="flex items-center gap-1.5 flex-shrink-0 opacity-0 pointer-events-none group-hover:opacity-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-focus-within:pointer-events-auto transition-opacity duration-200">
+          <div
+            ref={actionsRef}
+            className="absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-2 items-center gap-1.5 pl-3 opacity-0 pointer-events-none transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:translate-x-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
+          >
             <ProviderActions
               appId={appId}
               isCurrent={isCurrent}
diff --git a/src/components/providers/ProviderHealthBadge.tsx b/src/components/providers/ProviderHealthBadge.tsx
index aa6b55ad6b..1d395b77df 100644
--- a/src/components/providers/ProviderHealthBadge.tsx
+++ b/src/components/providers/ProviderHealthBadge.tsx
@@ -24,28 +24,24 @@ export function ProviderHealthBadge({
         labelKey: "health.operational",
         labelFallback: "正常",
         status: ProviderHealthStatus.Healthy,
-        color: "bg-green-500",
-        // 使用更深/柔和的背景色，去除可能的白色内容感
-        bgColor: "bg-green-500/10",
-        textColor: "text-green-600 dark:text-green-400",
+        statusColor: "hsl(var(--success))",
+        backgroundColor: "hsl(var(--success) / 0.12)",
       };
     } else if (consecutiveFailures < 5) {
       return {
         labelKey: "health.degraded",
         labelFallback: "降级",
         status: ProviderHealthStatus.Degraded,
-        color: "bg-yellow-500",
-        bgColor: "bg-yellow-500/10",
-        textColor: "text-yellow-600 dark:text-yellow-400",
+        statusColor: "hsl(var(--warning))",
+        backgroundColor: "hsl(var(--warning) / 0.12)",
       };
     } else {
       return {
         labelKey: "health.circuitOpen",
         labelFallback: "熔断",
         status: ProviderHealthStatus.Failed,
-        color: "bg-red-500",
-        bgColor: "bg-red-500/10",
-        textColor: "text-red-600 dark:text-red-400",
+        statusColor: "hsl(var(--destructive))",
+        backgroundColor: "hsl(var(--destructive) / 0.12)",
       };
     }
   };
@@ -59,16 +55,21 @@ export function ProviderHealthBadge({
     <div
       className={cn(
         "inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium",
-        statusConfig.bgColor,
-        statusConfig.textColor,
         className,
       )}
+      style={{
+        backgroundColor: statusConfig.backgroundColor,
+        color: statusConfig.statusColor,
+      }}
       title={t("health.consecutiveFailures", {
         count: consecutiveFailures,
         defaultValue: `连续失败 ${consecutiveFailures} 次`,
       })}
     >
-      <div className={cn("w-2 h-2 rounded-full", statusConfig.color)} />
+      <div
+        className="h-2 w-2 rounded-full"
+        style={{ backgroundColor: statusConfig.statusColor }}
+      />
       <span>{label}</span>
     </div>
   );
diff --git a/src/components/providers/ProviderList.tsx b/src/components/providers/ProviderList.tsx
index c0485b159a..6c454b428d 100644
--- a/src/components/providers/ProviderList.tsx
+++ b/src/components/providers/ProviderList.tsx
@@ -384,7 +384,7 @@ export function ProviderList({
             transition={{ duration: 0.18, ease: "easeOut" }}
             className="fixed left-1/2 top-[6.5rem] z-40 w-[min(90vw,26rem)] -translate-x-1/2 sm:right-6 sm:left-auto sm:translate-x-0"
           >
-            <div className="p-4 space-y-3 border shadow-md rounded-2xl border-white/10 bg-background/95 shadow-black/20 backdrop-blur-md">
+            <div className="space-y-3 rounded-2xl border border-border/60 bg-background/95 p-4 shadow-md shadow-foreground/10 backdrop-blur-md">
               <div className="relative flex items-center gap-2">
                 <Search className="absolute w-4 h-4 -translate-y-1/2 pointer-events-none left-3 top-1/2 text-muted-foreground" />
                 <Input
diff --git a/src/components/providers/forms/ApiKeyInput.tsx b/src/components/providers/forms/ApiKeyInput.tsx
index 784124bfe4..a236940960 100644
--- a/src/components/providers/forms/ApiKeyInput.tsx
+++ b/src/components/providers/forms/ApiKeyInput.tsx
@@ -31,7 +31,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
   const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
     disabled
       ? "bg-muted border-border-default text-muted-foreground cursor-not-allowed"
-      : "border-border-default bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20"
+      : "border-border-default bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring/20"
   }`;
 
   return (
diff --git a/src/components/providers/forms/CodexCommonConfigModal.tsx b/src/components/providers/forms/CodexCommonConfigModal.tsx
index 0c0207d91a..4ab8266f17 100644
--- a/src/components/providers/forms/CodexCommonConfigModal.tsx
+++ b/src/components/providers/forms/CodexCommonConfigModal.tsx
@@ -143,7 +143,7 @@ export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
         />
 
         {error && (
-          <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
+          <p className="text-sm text-[hsl(var(--destructive))]">{error}</p>
         )}
       </div>
     </FullScreenPanel>
diff --git a/src/components/providers/forms/CodexConfigSections.tsx b/src/components/providers/forms/CodexConfigSections.tsx
index 2805283920..44e22d493e 100644
--- a/src/components/providers/forms/CodexConfigSections.tsx
+++ b/src/components/providers/forms/CodexConfigSections.tsx
@@ -7,6 +7,9 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import JsonEditor from "@/components/JsonEditor";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 import {
   extractCodexTopLevelInt,
   setCodexTopLevelInt,
@@ -74,7 +77,7 @@ export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
       />
 
       {error && (
-        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+        <p className="text-xs text-[hsl(var(--destructive))]">{error}</p>
       )}
 
       {!error && (
@@ -96,6 +99,26 @@ interface CodexConfigSectionProps {
   configError?: string;
 }
 
+function ToggleChip({
+  checked,
+  label,
+  onCheckedChange,
+}: {
+  checked: boolean;
+  label: string;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-border/70 bg-background/55 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:border-border-hover hover:text-foreground">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
 /**
  * CodexConfigSection - Config TOML editor section
  */
@@ -213,55 +236,54 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
   }, []);
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <label
-          htmlFor="codexConfig"
-          className="block text-sm font-medium text-foreground"
-        >
-          {t("codexConfig.configToml")}
-        </label>
-
-        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-          <input
-            type="checkbox"
-            checked={useCommonConfig}
-            onChange={(e) => onCommonConfigToggle(e.target.checked)}
-            className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default  rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-          />
-          {t("codexConfig.writeCommonConfig")}
-        </label>
+    <div className="space-y-4 rounded-[calc(var(--radius)+0.25rem)] border border-border/70 bg-card/45 p-4 shadow-sm">
+      <div className="flex items-center justify-between gap-3">
+        <div className="space-y-1">
+          <label
+            htmlFor="codexConfig"
+            className="block text-sm font-medium text-foreground"
+          >
+            {t("codexConfig.configToml")}
+          </label>
+          <p className="text-xs text-muted-foreground">
+            {t("codexConfig.configTomlHint")}
+          </p>
+        </div>
+
+        <ToggleChip
+          checked={useCommonConfig}
+          onCheckedChange={onCommonConfigToggle}
+          label={t("codexConfig.writeCommonConfig")}
+        />
       </div>
 
       <div className="flex items-center justify-end">
-        <button
+        <Button
           type="button"
           onClick={onEditCommonConfig}
-          className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
+          variant="link"
+          size="sm"
+          className="h-auto px-0 py-0 text-xs"
         >
           {t("codexConfig.editCommonConfig")}
-        </button>
+        </Button>
       </div>
 
       {commonConfigError && (
-        <p className="text-xs text-red-500 dark:text-red-400 text-right">
+        <p className="text-xs text-[hsl(var(--destructive))] text-right">
           {commonConfigError}
         </p>
       )}
 
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-          <input
-            type="checkbox"
-            checked={toggleStates.contextWindow1M}
-            onChange={(e) => handleContextWindowToggle(e.target.checked)}
-            className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-          />
-          <span>{t("codexConfig.contextWindow1M")}</span>
-        </label>
-        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="flex flex-wrap items-center gap-2">
+        <ToggleChip
+          checked={toggleStates.contextWindow1M}
+          onCheckedChange={handleContextWindowToggle}
+          label={t("codexConfig.contextWindow1M")}
+        />
+        <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/55 px-3 py-1.5 text-sm text-muted-foreground">
           <span>{t("codexConfig.autoCompactLimit")}:</span>
-          <input
+          <Input
             type="text"
             inputMode="numeric"
             pattern="[0-9]*"
@@ -269,9 +291,9 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
             defaultValue={toggleStates.compactLimit}
             disabled={!toggleStates.contextWindow1M}
             onChange={(e) => handleCompactLimitChange(e.target.value)}
-            className="w-28 h-7 px-2 text-sm rounded border border-border bg-background text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+            className="h-7 w-28 border-border/70 bg-background/70 px-2 text-sm"
           />
-        </label>
+        </div>
       </div>
 
       <JsonEditor
@@ -285,13 +307,7 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
       />
 
       {configError && (
-        <p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
-      )}
-
-      {!configError && (
-        <p className="text-xs text-muted-foreground">
-          {t("codexConfig.configTomlHint")}
-        </p>
+        <p className="text-xs text-[hsl(var(--destructive))]">{configError}</p>
       )}
     </div>
   );
diff --git a/src/components/providers/forms/CommonConfigEditor.tsx b/src/components/providers/forms/CommonConfigEditor.tsx
index 2ec4bdff8a..798a85032e 100644
--- a/src/components/providers/forms/CommonConfigEditor.tsx
+++ b/src/components/providers/forms/CommonConfigEditor.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useCallback, useMemo } from "react";
 import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Save, Download, Loader2, Package } from "lucide-react";
 import JsonEditor from "@/components/JsonEditor";
 
@@ -21,6 +22,24 @@ interface CommonConfigEditorProps {
   isExtracting?: boolean;
 }
 
+interface ConfigToggleProps {
+  checked: boolean;
+  label: string;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+function ConfigToggle({ checked, label, onCheckedChange }: ConfigToggleProps) {
+  return (
+    <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-border/70 bg-background/55 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:border-border-hover hover:text-foreground">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
 export function CommonConfigEditor({
   value,
   onChange,
@@ -156,94 +175,82 @@ export function CommonConfigEditor({
 
   return (
     <>
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <Label htmlFor="settingsConfig">{t("provider.configJson")}</Label>
-          <div className="flex items-center gap-2">
-            <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-              <input
-                type="checkbox"
-                id="useCommonConfig"
-                checked={useCommonConfig}
-                onChange={(e) => onCommonConfigToggle(e.target.checked)}
-                className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-              />
-              <span>
-                {t("claudeConfig.writeCommonConfig", {
-                  defaultValue: "写入通用配置",
-                })}
-              </span>
-            </label>
+      <div className="space-y-4 rounded-[calc(var(--radius)+0.25rem)] border border-border/70 bg-card/45 p-4 shadow-sm">
+        <div className="flex items-center justify-between gap-3">
+          <div className="space-y-1">
+            <Label htmlFor="settingsConfig">{t("provider.configJson")}</Label>
+            <p className="text-xs text-muted-foreground">
+              {t("claudeConfig.commonConfigHint", {
+                defaultValue: "通用配置片段将合并到所有启用它的供应商配置中",
+              })}
+            </p>
           </div>
+          <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-border/70 bg-background/55 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:border-border-hover hover:text-foreground">
+            <Checkbox
+              id="useCommonConfig"
+              checked={useCommonConfig}
+              onCheckedChange={(checked) =>
+                onCommonConfigToggle(checked === true)
+              }
+            />
+            <span>
+              {t("claudeConfig.writeCommonConfig", {
+                defaultValue: "写入通用配置",
+              })}
+            </span>
+          </label>
         </div>
+
         <div className="flex items-center justify-end">
-          <button
+          <Button
             type="button"
             onClick={onEditClick}
-            className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            variant="link"
+            size="sm"
+            className="h-auto px-0 py-0 text-xs"
           >
             {t("claudeConfig.editCommonConfig", {
               defaultValue: "编辑通用配置",
             })}
-          </button>
+          </Button>
         </div>
         {commonConfigError && !isModalOpen && (
-          <p className="text-xs text-red-500 dark:text-red-400 text-right">
+          <p className="text-right text-xs text-[hsl(var(--destructive))]">
             {commonConfigError}
           </p>
         )}
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-          <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <input
-              type="checkbox"
-              checked={toggleStates.hideAttribution}
-              onChange={(e) =>
-                handleToggle("hideAttribution", e.target.checked)
-              }
-              className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-            />
-            <span>{t("claudeConfig.hideAttribution")}</span>
-          </label>
-          <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <input
-              type="checkbox"
-              checked={toggleStates.teammates}
-              onChange={(e) => handleToggle("teammates", e.target.checked)}
-              className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-            />
-            <span>{t("claudeConfig.enableTeammates")}</span>
-          </label>
-          <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <input
-              type="checkbox"
-              checked={toggleStates.enableToolSearch}
-              onChange={(e) =>
-                handleToggle("enableToolSearch", e.target.checked)
-              }
-              className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-            />
-            <span>{t("claudeConfig.enableToolSearch")}</span>
-          </label>
-          <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <input
-              type="checkbox"
-              checked={toggleStates.effortHigh}
-              onChange={(e) => handleToggle("effortHigh", e.target.checked)}
-              className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-            />
-            <span>{t("claudeConfig.effortHigh")}</span>
-          </label>
-          <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-            <input
-              type="checkbox"
-              checked={toggleStates.disableAutoUpgrade}
-              onChange={(e) =>
-                handleToggle("disableAutoUpgrade", e.target.checked)
-              }
-              className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-            />
-            <span>{t("claudeConfig.disableAutoUpgrade")}</span>
-          </label>
+        <div className="flex flex-wrap items-center gap-2">
+          <ConfigToggle
+            checked={toggleStates.hideAttribution}
+            onCheckedChange={(checked) =>
+              handleToggle("hideAttribution", checked)
+            }
+            label={t("claudeConfig.hideAttribution")}
+          />
+          <ConfigToggle
+            checked={toggleStates.teammates}
+            onCheckedChange={(checked) => handleToggle("teammates", checked)}
+            label={t("claudeConfig.enableTeammates")}
+          />
+          <ConfigToggle
+            checked={toggleStates.enableToolSearch}
+            onCheckedChange={(checked) =>
+              handleToggle("enableToolSearch", checked)
+            }
+            label={t("claudeConfig.enableToolSearch")}
+          />
+          <ConfigToggle
+            checked={toggleStates.effortHigh}
+            onCheckedChange={(checked) => handleToggle("effortHigh", checked)}
+            label={t("claudeConfig.effortHigh")}
+          />
+          <ConfigToggle
+            checked={toggleStates.disableAutoUpgrade}
+            onCheckedChange={(checked) =>
+              handleToggle("disableAutoUpgrade", checked)
+            }
+            label={t("claudeConfig.disableAutoUpgrade")}
+          />
         </div>
         <JsonEditor
           value={localValue}
@@ -340,7 +347,7 @@ export function CommonConfigEditor({
             language="json"
           />
           {commonConfigError && (
-            <p className="text-sm text-red-500 dark:text-red-400">
+            <p className="text-sm text-[hsl(var(--destructive))]">
               {commonConfigError}
             </p>
           )}
diff --git a/src/components/providers/forms/CopilotAuthSection.tsx b/src/components/providers/forms/CopilotAuthSection.tsx
index 608eb6d0f7..880f60f8a2 100644
--- a/src/components/providers/forms/CopilotAuthSection.tsx
+++ b/src/components/providers/forms/CopilotAuthSection.tsx
@@ -102,7 +102,11 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
         <Label>{t("copilot.authStatus", "GitHub Copilot 认证")}</Label>
         <Badge
           variant={hasAnyAccount ? "default" : "secondary"}
-          className={hasAnyAccount ? "bg-green-500 hover:bg-green-600" : ""}
+          className={
+            hasAnyAccount
+              ? "bg-[hsl(var(--success))] hover:bg-[hsl(var(--success)/0.9)] text-white"
+              : ""
+          }
         >
           {hasAnyAccount
             ? t("copilot.accountCount", {
@@ -114,7 +118,7 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
       </div>
 
       {migrationError && (
-        <p className="text-sm text-amber-600 dark:text-amber-400">
+        <p className="text-sm text-[hsl(var(--warning))]">
           {t("copilot.migrationFailed", {
             error: migrationError,
             defaultValue: `旧认证数据迁移失败：${migrationError}`,
@@ -202,7 +206,7 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
                     type="button"
                     variant="ghost"
                     size="icon"
-                    className="h-7 w-7 text-muted-foreground hover:text-red-500"
+                    className="h-7 w-7 text-muted-foreground hover:text-destructive"
                     onClick={(e) => handleRemoveAccount(account.id, e)}
                     disabled={isRemovingAccount}
                     title={t("copilot.removeAccount", "移除账号")}
@@ -268,7 +272,10 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
                 title={t("copilot.copyCode", "复制代码")}
               >
                 {copied ? (
-                  <Check className="h-4 w-4 text-green-500" />
+                  <Check
+                    className="h-4 w-4"
+                    style={{ color: "hsl(var(--success))" }}
+                  />
                 ) : (
                   <Copy className="h-4 w-4" />
                 )}
@@ -282,7 +289,7 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
               href={deviceCode.verification_uri}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-sm text-blue-500 hover:underline"
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
             >
               {deviceCode.verification_uri}
               <ExternalLink className="h-3 w-3" />
@@ -306,7 +313,7 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
       {/* 错误状态 */}
       {pollingState === "error" && error && (
         <div className="space-y-2">
-          <p className="text-sm text-red-500">{error}</p>
+          <p className="text-sm text-[hsl(var(--destructive))]">{error}</p>
           <div className="flex gap-2">
             <Button
               type="button"
@@ -334,7 +341,7 @@ export const CopilotAuthSection: React.FC<CopilotAuthSectionProps> = ({
           type="button"
           variant="outline"
           onClick={logout}
-          className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950"
+          className="w-full text-[hsl(var(--destructive))] hover:text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.08)]"
         >
           <LogOut className="mr-2 h-4 w-4" />
           {t("copilot.logoutAll", "注销所有账号")}
diff --git a/src/components/providers/forms/EndpointSpeedTest.tsx b/src/components/providers/forms/EndpointSpeedTest.tsx
index 2143d21dbb..c583d54ccc 100644
--- a/src/components/providers/forms/EndpointSpeedTest.tsx
+++ b/src/components/providers/forms/EndpointSpeedTest.tsx
@@ -4,6 +4,7 @@ import { Zap, Loader2, Plus, X, AlertCircle, Save } from "lucide-react";
 import type { AppId } from "@/lib/api";
 import { vscodeApi } from "@/lib/api/vscode";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { FullScreenPanel } from "@/components/common/FullScreenPanel";
 import type { CustomEndpoint, EndpointCandidate } from "@/types";
@@ -482,21 +483,20 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
       onClose={onClose}
       footer={footer}
     >
-      <div className="glass rounded-xl p-6 border border-white/10 flex flex-col gap-6">
+      <div className="glass flex flex-col gap-6 rounded-xl border border-border/50 p-6">
         {/* 测速控制栏 */}
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
             {entries.length} {t("endpointTest.endpoints")}
           </div>
           <div className="flex items-center gap-3">
-            <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
-              <input
-                type="checkbox"
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Checkbox
                 checked={autoSelect}
-                onChange={(event) => {
-                  onAutoSelectChange(event.target.checked);
+                onCheckedChange={(checked) => {
+                  onAutoSelectChange(checked === true);
                 }}
-                className="h-3.5 w-3.5 rounded border-border-default bg-background text-primary focus:ring-2 focus:ring-primary/20"
+                className="h-3.5 w-3.5"
               />
               {t("endpointTest.autoSelect")}
             </label>
@@ -548,7 +548,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
             </Button>
           </div>
           {addError && (
-            <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
+            <div className="flex items-center gap-1.5 text-xs text-[hsl(var(--destructive))]">
               <AlertCircle className="h-3 w-3" />
               {addError}
             </div>
@@ -576,9 +576,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
                     {/* 选择指示器 */}
                     <div
                       className={`h-1.5 w-1.5 flex-shrink-0 rounded-full transition ${
-                        isSelected
-                          ? "bg-blue-500 dark:bg-blue-400"
-                          : "bg-gray-300 dark:bg-gray-700"
+                        isSelected ? "bg-primary" : "bg-muted-foreground/35"
                       }`}
                     />
 
@@ -595,27 +593,29 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
                     {latency !== null ? (
                       <div className="text-right">
                         <div
-                          className={`font-mono text-sm font-medium ${
-                            latency < 300
-                              ? "text-emerald-600 dark:text-emerald-400"
-                              : latency < 500
-                                ? "text-yellow-600 dark:text-yellow-400"
-                                : latency < 800
-                                  ? "text-orange-600 dark:text-orange-400"
-                                  : "text-red-600 dark:text-red-400"
-                          }`}
+                          className="font-mono text-sm font-medium"
+                          style={{
+                            color:
+                              latency < 300
+                                ? "hsl(var(--success))"
+                                : latency < 500
+                                  ? "hsl(var(--warning))"
+                                  : latency < 800
+                                    ? "hsl(var(--chart-2))"
+                                    : "hsl(var(--destructive))",
+                          }}
                         >
                           {latency}ms
                         </div>
                       </div>
                     ) : isTesting ? (
-                      <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                     ) : entry.error ? (
-                      <div className="text-xs text-gray-400">
+                      <div className="text-xs text-muted-foreground">
                         {t("endpointTest.failed")}
                       </div>
                     ) : (
-                      <div className="text-xs text-gray-400">—</div>
+                      <div className="text-xs text-muted-foreground">—</div>
                     )}
 
                     <button
@@ -624,7 +624,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
                         event.stopPropagation();
                         handleRemoveEndpoint(entry);
                       }}
-                      className="opacity-0 transition hover:text-red-600 group-hover:opacity-100 dark:hover:text-red-400"
+                      className="opacity-0 transition group-hover:opacity-100 hover:text-[hsl(var(--destructive))]"
                     >
                       <X className="h-4 w-4" />
                     </button>
@@ -641,7 +641,7 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
 
         {/* 错误提示 */}
         {lastError && (
-          <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
+          <div className="flex items-center gap-1.5 text-xs text-[hsl(var(--destructive))]">
             <AlertCircle className="h-3 w-3" />
             {lastError}
           </div>
diff --git a/src/components/providers/forms/GeminiCommonConfigModal.tsx b/src/components/providers/forms/GeminiCommonConfigModal.tsx
index c7dd057698..3345617b76 100644
--- a/src/components/providers/forms/GeminiCommonConfigModal.tsx
+++ b/src/components/providers/forms/GeminiCommonConfigModal.tsx
@@ -144,7 +144,7 @@ export const GeminiCommonConfigModal: React.FC<
         />
 
         {error && (
-          <p className="text-sm text-red-500 dark:text-red-400">{error}</p>
+          <p className="text-sm text-[hsl(var(--destructive))]">{error}</p>
         )}
       </div>
     </FullScreenPanel>
diff --git a/src/components/providers/forms/GeminiConfigSections.tsx b/src/components/providers/forms/GeminiConfigSections.tsx
index 999f986dca..01e266e900 100644
--- a/src/components/providers/forms/GeminiConfigSections.tsx
+++ b/src/components/providers/forms/GeminiConfigSections.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import JsonEditor from "@/components/JsonEditor";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 
 interface GeminiEnvSectionProps {
   value: string;
@@ -13,6 +15,32 @@ interface GeminiEnvSectionProps {
   commonConfigError?: string;
 }
 
+interface GeminiConfigSectionProps {
+  value: string;
+  onChange: (value: string) => void;
+  configError?: string;
+}
+
+function ToggleChip({
+  checked,
+  label,
+  onCheckedChange,
+}: {
+  checked: boolean;
+  label: string;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-border/70 bg-background/55 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:border-border-hover hover:text-foreground">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(nextChecked) => onCheckedChange(nextChecked === true)}
+      />
+      <span>{label}</span>
+    </label>
+  );
+}
+
 /**
  * GeminiEnvSection - .env editor section for Gemini environment variables
  */
@@ -52,42 +80,47 @@ export const GeminiEnvSection: React.FC<GeminiEnvSectionProps> = ({
   };
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <label
-          htmlFor="geminiEnv"
-          className="block text-sm font-medium text-foreground"
-        >
-          {t("geminiConfig.envFile", { defaultValue: "环境变量 (.env)" })}
-        </label>
-
-        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
-          <input
-            type="checkbox"
-            checked={useCommonConfig}
-            onChange={(e) => onCommonConfigToggle(e.target.checked)}
-            className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-border-default rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
-          />
-          {t("geminiConfig.writeCommonConfig", {
+    <div className="space-y-4 rounded-[calc(var(--radius)+0.25rem)] border border-border/70 bg-card/45 p-4 shadow-sm">
+      <div className="flex items-center justify-between gap-3">
+        <div className="space-y-1">
+          <label
+            htmlFor="geminiEnv"
+            className="block text-sm font-medium text-foreground"
+          >
+            {t("geminiConfig.envFile", { defaultValue: "环境变量 (.env)" })}
+          </label>
+          <p className="text-xs text-muted-foreground">
+            {t("geminiConfig.envFileHint", {
+              defaultValue: "使用 .env 格式配置 Gemini 环境变量",
+            })}
+          </p>
+        </div>
+
+        <ToggleChip
+          checked={useCommonConfig}
+          onCheckedChange={onCommonConfigToggle}
+          label={t("geminiConfig.writeCommonConfig", {
             defaultValue: "写入通用配置",
           })}
-        </label>
+        />
       </div>
 
       <div className="flex items-center justify-end">
-        <button
+        <Button
           type="button"
           onClick={onEditCommonConfig}
-          className="text-xs text-blue-500 dark:text-blue-400 hover:underline"
+          variant="link"
+          size="sm"
+          className="h-auto px-0 py-0 text-xs"
         >
           {t("geminiConfig.editCommonConfig", {
             defaultValue: "编辑通用配置",
           })}
-        </button>
+        </Button>
       </div>
 
       {commonConfigError && (
-        <p className="text-xs text-red-500 dark:text-red-400 text-right">
+        <p className="text-right text-xs text-[hsl(var(--destructive))]">
           {commonConfigError}
         </p>
       )}
@@ -105,26 +138,12 @@ GEMINI_MODEL=gemini-3-pro-preview`}
       />
 
       {error && (
-        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
-      )}
-
-      {!error && (
-        <p className="text-xs text-muted-foreground">
-          {t("geminiConfig.envFileHint", {
-            defaultValue: "使用 .env 格式配置 Gemini 环境变量",
-          })}
-        </p>
+        <p className="text-xs text-[hsl(var(--destructive))]">{error}</p>
       )}
     </div>
   );
 };
 
-interface GeminiConfigSectionProps {
-  value: string;
-  onChange: (value: string) => void;
-  configError?: string;
-}
-
 /**
  * GeminiConfigSection - Config JSON editor section with common config support
  */
@@ -152,15 +171,22 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
   }, []);
 
   return (
-    <div className="space-y-2">
-      <label
-        htmlFor="geminiConfig"
-        className="block text-sm font-medium text-foreground"
-      >
-        {t("geminiConfig.configJson", {
-          defaultValue: "配置文件 (config.json)",
-        })}
-      </label>
+    <div className="space-y-4 rounded-[calc(var(--radius)+0.25rem)] border border-border/70 bg-card/45 p-4 shadow-sm">
+      <div className="space-y-1">
+        <label
+          htmlFor="geminiConfig"
+          className="block text-sm font-medium text-foreground"
+        >
+          {t("geminiConfig.configJson", {
+            defaultValue: "配置文件 (config.json)",
+          })}
+        </label>
+        <p className="text-xs text-muted-foreground">
+          {t("geminiConfig.configJsonHint", {
+            defaultValue: "使用 JSON 格式配置 Gemini 扩展参数（可选）",
+          })}
+        </p>
+      </div>
 
       <JsonEditor
         value={value}
@@ -176,15 +202,7 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
       />
 
       {configError && (
-        <p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
-      )}
-
-      {!configError && (
-        <p className="text-xs text-muted-foreground">
-          {t("geminiConfig.configJsonHint", {
-            defaultValue: "使用 JSON 格式配置 Gemini 扩展参数（可选）",
-          })}
-        </p>
+        <p className="text-xs text-[hsl(var(--destructive))]">{configError}</p>
       )}
     </div>
   );
diff --git a/src/components/providers/forms/GeminiFormFields.tsx b/src/components/providers/forms/GeminiFormFields.tsx
index a01a16c56f..623280c6c0 100644
--- a/src/components/providers/forms/GeminiFormFields.tsx
+++ b/src/components/providers/forms/GeminiFormFields.tsx
@@ -111,16 +111,16 @@ export function GeminiFormFields({
     <>
       {/* Google OAuth 提示 */}
       {isGoogleOfficial && (
-        <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950">
+        <div className="rounded-lg border border-primary/20 bg-primary/10 p-4">
           <div className="flex gap-3">
-            <Info className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
+            <Info className="h-5 w-5 flex-shrink-0 text-primary" />
             <div className="space-y-1">
-              <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              <p className="text-sm font-medium text-foreground">
                 {t("provider.form.gemini.oauthTitle", {
                   defaultValue: "OAuth 认证模式",
                 })}
               </p>
-              <p className="text-sm text-blue-700 dark:text-blue-300">
+              <p className="text-sm text-primary">
                 {t("provider.form.gemini.oauthHint", {
                   defaultValue:
                     "Google 官方使用 OAuth 个人认证，无需填写 API Key。首次使用时会自动打开浏览器进行登录。",
diff --git a/src/components/providers/forms/OpenClawFormFields.tsx b/src/components/providers/forms/OpenClawFormFields.tsx
index 7253c16971..a614925e4c 100644
--- a/src/components/providers/forms/OpenClawFormFields.tsx
+++ b/src/components/providers/forms/OpenClawFormFields.tsx
@@ -332,7 +332,7 @@ export function OpenClawFormFields({
                   <span
                     className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
                       index === 0
-                        ? "bg-blue-500/15 text-blue-600 dark:text-blue-400"
+                        ? "bg-primary/15 text-primary"
                         : "bg-muted text-muted-foreground"
                     }`}
                   >
diff --git a/src/components/providers/forms/ProviderForm.tsx b/src/components/providers/forms/ProviderForm.tsx
index 35de812d71..df3d6d6c0d 100644
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -1365,7 +1365,7 @@ export function ProviderForm({
         <form
           id="provider-form"
           onSubmit={form.handleSubmit(handleSubmit)}
-          className="space-y-6 glass rounded-xl p-6 border border-white/10"
+          className="glass space-y-6 rounded-xl border border-border/50 p-6"
         >
           {!initialData && (
             <ProviderPresetSelector
diff --git a/src/components/providers/forms/ProviderPresetSelector.tsx b/src/components/providers/forms/ProviderPresetSelector.tsx
index d1e3f7bad7..9bbc8640ab 100644
--- a/src/components/providers/forms/ProviderPresetSelector.tsx
+++ b/src/components/providers/forms/ProviderPresetSelector.tsx
@@ -11,6 +11,7 @@ import {
   type UniversalProviderPreset,
 } from "@/config/universalProviderPresets";
 import { ProviderIcon } from "@/components/ProviderIcon";
+import { getReadableTextColor } from "@/lib/theme/customTheme";
 
 type PresetEntry = {
   id: string;
@@ -103,9 +104,9 @@ export function ProviderPresetSelector({
 
     if (isSelected) {
       if (preset.theme?.backgroundColor) {
-        return `${baseClass} text-white`;
+        return baseClass;
       }
-      return `${baseClass} bg-blue-500 text-white dark:bg-blue-600`;
+      return `${baseClass} bg-primary text-primary-foreground`;
     }
 
     return `${baseClass} bg-accent text-muted-foreground hover:bg-accent/80`;
@@ -121,7 +122,9 @@ export function ProviderPresetSelector({
 
     return {
       backgroundColor: preset.theme.backgroundColor,
-      color: preset.theme.textColor || "#FFFFFF",
+      color:
+        preset.theme.textColor ??
+        getReadableTextColor(preset.theme.backgroundColor),
     };
   };
 
@@ -134,7 +137,7 @@ export function ProviderPresetSelector({
           onClick={() => onPresetChange("custom")}
           className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
             selectedPresetId === "custom"
-              ? "bg-blue-500 text-white dark:bg-blue-600"
+              ? "bg-primary text-primary-foreground"
               : "bg-accent text-muted-foreground hover:bg-accent/80"
           }`}
         >
@@ -163,7 +166,7 @@ export function ProviderPresetSelector({
                   ? t(entry.preset.nameKey)
                   : entry.preset.name}
                 {isPartner && (
-                  <span className="absolute -top-1 -right-1 flex items-center gap-0.5 rounded-full bg-gradient-to-r from-amber-500 to-yellow-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow-md">
+                  <span className="absolute -right-1 -top-1 flex items-center gap-0.5 rounded-full border border-accent/50 bg-accent px-1.5 py-0.5 text-[10px] font-bold text-accent-foreground shadow-sm">
                     <Star className="h-2.5 w-2.5 fill-current" />
                   </span>
                 )}
@@ -189,7 +192,7 @@ export function ProviderPresetSelector({
               >
                 <ProviderIcon icon={preset.icon} name={preset.name} size={14} />
                 {preset.name}
-                <span className="absolute -top-1 -right-1 flex items-center gap-0.5 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow-md">
+                <span className="absolute -right-1 -top-1 flex items-center gap-0.5 rounded-full border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-[10px] font-bold text-primary shadow-sm">
                   <Layers className="h-2.5 w-2.5" />
                 </span>
               </button>
diff --git a/src/components/providers/forms/shared/ApiKeySection.tsx b/src/components/providers/forms/shared/ApiKeySection.tsx
index b873eb0c2f..33cae692ba 100644
--- a/src/components/providers/forms/shared/ApiKeySection.tsx
+++ b/src/components/providers/forms/shared/ApiKeySection.tsx
@@ -66,7 +66,7 @@ export function ApiKeySection({
             href={websiteUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            className="text-xs text-primary hover:text-primary/80 transition-colors"
           >
             {t("providerForm.getApiKey", {
               defaultValue: "获取 API Key",
@@ -75,8 +75,8 @@ export function ApiKeySection({
 
           {/* 合作伙伴促销信息 */}
           {isPartner && partnerPromotionKey && (
-            <div className="rounded-md bg-blue-50 dark:bg-blue-950/30 p-2.5 border border-blue-200 dark:border-blue-800">
-              <p className="text-xs leading-relaxed text-blue-700 dark:text-blue-300">
+            <div className="rounded-md bg-primary/10 p-2.5 border border-primary/20">
+              <p className="text-xs leading-relaxed text-primary">
                 💡{" "}
                 {t(`providerForm.partnerPromotion.${partnerPromotionKey}`, {
                   defaultValue: "",
diff --git a/src/components/providers/forms/shared/EndpointField.tsx b/src/components/providers/forms/shared/EndpointField.tsx
index bf33afc922..c06a141473 100644
--- a/src/components/providers/forms/shared/EndpointField.tsx
+++ b/src/components/providers/forms/shared/EndpointField.tsx
@@ -98,10 +98,8 @@ export function EndpointField({
         autoComplete="off"
       />
       {effectiveHint ? (
-        <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
-          <p className="text-xs text-amber-600 dark:text-amber-400">
-            {effectiveHint}
-          </p>
+        <div className="p-3 rounded-lg border border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.08)]">
+          <p className="text-xs text-[hsl(var(--warning))]">{effectiveHint}</p>
         </div>
       ) : null}
     </div>
diff --git a/src/components/proxy/AutoFailoverConfigPanel.tsx b/src/components/proxy/AutoFailoverConfigPanel.tsx
index fe258b8d46..d44da639d0 100644
--- a/src/components/proxy/AutoFailoverConfigPanel.tsx
+++ b/src/components/proxy/AutoFailoverConfigPanel.tsx
@@ -222,7 +222,7 @@ export function AutoFailoverConfigPanel({
           </Alert>
         )}
 
-        <Alert className="border-blue-500/40 bg-blue-500/10">
+        <Alert className="border-primary/40 bg-primary/10">
           <Info className="h-4 w-4" />
           <AlertDescription className="text-sm">
             {t(
@@ -233,7 +233,7 @@ export function AutoFailoverConfigPanel({
         </Alert>
 
         {/* 重试与超时配置 */}
-        <div className="space-y-4 rounded-lg border border-white/10 bg-muted/30 p-4">
+        <div className="space-y-4 rounded-lg border border-border/50 bg-muted/30 p-4">
           <h4 className="text-sm font-semibold">
             {t("proxy.autoFailover.retrySettings", "重试与超时设置")}
           </h4>
@@ -291,7 +291,7 @@ export function AutoFailoverConfigPanel({
         </div>
 
         {/* 超时配置 */}
-        <div className="space-y-4 rounded-lg border border-white/10 bg-muted/30 p-4">
+        <div className="space-y-4 rounded-lg border border-border/50 bg-muted/30 p-4">
           <h4 className="text-sm font-semibold">
             {t("proxy.autoFailover.timeoutSettings", "超时配置")}
           </h4>
@@ -381,7 +381,7 @@ export function AutoFailoverConfigPanel({
         </div>
 
         {/* 熔断器配置 */}
-        <div className="space-y-4 rounded-lg border border-white/10 bg-muted/30 p-4">
+        <div className="space-y-4 rounded-lg border border-border/50 bg-muted/30 p-4">
           <h4 className="text-sm font-semibold">
             {t("proxy.autoFailover.circuitBreakerSettings", "熔断器配置")}
           </h4>
diff --git a/src/components/proxy/FailoverQueueManager.tsx b/src/components/proxy/FailoverQueueManager.tsx
index 9d56475dc9..66f3a91d7c 100644
--- a/src/components/proxy/FailoverQueueManager.tsx
+++ b/src/components/proxy/FailoverQueueManager.tsx
@@ -133,7 +133,7 @@ export function FailoverQueueManager({
               })}
             </span>
             {isFailoverEnabled && (
-              <span className="px-2 py-0.5 text-xs rounded-full bg-emerald-500/20 text-emerald-600 dark:text-emerald-400">
+              <span className="px-2 py-0.5 text-xs rounded-full bg-primary/20 text-primary">
                 {t("common.enabled", { defaultValue: "已开启" })}
               </span>
             )}
@@ -153,7 +153,7 @@ export function FailoverQueueManager({
       </div>
 
       {/* 说明信息 */}
-      <Alert className="border-blue-500/40 bg-blue-500/10">
+      <Alert className="border-primary/40 bg-primary/10">
         <Info className="h-4 w-4" />
         <AlertDescription className="text-sm">
           {t(
diff --git a/src/components/proxy/FailoverToggle.tsx b/src/components/proxy/FailoverToggle.tsx
index 9e6e231218..6e8d4001a7 100644
--- a/src/components/proxy/FailoverToggle.tsx
+++ b/src/components/proxy/FailoverToggle.tsx
@@ -60,9 +60,7 @@ export function FailoverToggle({ className, activeApp }: FailoverToggleProps) {
         <Shuffle
           className={cn(
             "h-4 w-4 transition-colors",
-            isEnabled
-              ? "text-emerald-500 animate-pulse"
-              : "text-muted-foreground",
+            isEnabled ? "text-primary animate-pulse" : "text-muted-foreground",
           )}
         />
       )}
diff --git a/src/components/proxy/ProxyPanel.tsx b/src/components/proxy/ProxyPanel.tsx
index 1052f2ece1..c79cadeb6c 100644
--- a/src/components/proxy/ProxyPanel.tsx
+++ b/src/components/proxy/ProxyPanel.tsx
@@ -202,7 +202,7 @@ export function ProxyPanel({
       <section className="space-y-4">
         {/* [1] Enable proxy button on main page — always visible */}
         <ToggleRow
-          icon={<Zap className="h-4 w-4 text-green-500" />}
+          icon={<Zap className="h-4 w-4 text-primary" />}
           title={t("settings.advanced.proxy.enableFeature")}
           description={t("settings.advanced.proxy.enableFeatureDescription")}
           checked={enableLocalProxy}
@@ -213,7 +213,7 @@ export function ProxyPanel({
         <div className="flex items-center justify-between rounded-xl border border-border bg-card/50 p-4 transition-colors hover:bg-muted/50">
           <div className="flex items-center gap-3">
             <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-background ring-1 ring-border">
-              <Power className="h-4 w-4 text-green-500" />
+              <Power className="h-4 w-4 text-primary" />
             </div>
             <div className="space-y-1">
               <p className="text-sm font-medium leading-none">
@@ -360,7 +360,7 @@ export function ProxyPanel({
                     </span>
                   </p>
                 ) : (
-                  <p className="text-sm text-yellow-600 dark:text-yellow-400">
+                  <p className="text-sm text-muted-foreground">
                     {t("proxy.panel.waitingFirstRequest", {
                       defaultValue: "当前 Provider：等待首次请求…",
                     })}
@@ -598,8 +598,8 @@ interface StatCardProps {
 function StatCard({ icon, label, value, variant = "default" }: StatCardProps) {
   const variantStyles = {
     default: "",
-    success: "border-green-500/40 bg-green-500/5",
-    warning: "border-yellow-500/40 bg-yellow-500/5",
+    success: "border-primary/30 bg-primary/5",
+    warning: "border-accent/40 bg-accent/20",
   };
 
   return (
diff --git a/src/components/proxy/ProxyToggle.tsx b/src/components/proxy/ProxyToggle.tsx
index 61c831eddc..1b48d45181 100644
--- a/src/components/proxy/ProxyToggle.tsx
+++ b/src/components/proxy/ProxyToggle.tsx
@@ -73,7 +73,7 @@ export function ProxyToggle({ className, activeApp }: ProxyToggleProps) {
           className={cn(
             "h-4 w-4 transition-colors",
             takeoverEnabled
-              ? "text-emerald-500 animate-pulse"
+              ? "text-primary animate-pulse"
               : "text-muted-foreground",
           )}
         />
diff --git a/src/components/sessions/SessionManagerPage.tsx b/src/components/sessions/SessionManagerPage.tsx
index 3f16de0cca..4ea07d1fd3 100644
--- a/src/components/sessions/SessionManagerPage.tsx
+++ b/src/components/sessions/SessionManagerPage.tsx
@@ -467,7 +467,7 @@ export function SessionManagerPage({ appId }: { appId: string }) {
                           <Button
                             variant="secondary"
                             size="icon"
-                            className="size-7 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-950/60"
+                            className="size-7 border border-primary/20 bg-primary/10 text-primary hover:bg-primary/15"
                             aria-label={t(
                               "sessionManager.exitBatchModeTooltip",
                               {
@@ -508,7 +508,7 @@ export function SessionManagerPage({ appId }: { appId: string }) {
                                 size="icon"
                                 className={
                                   selectionMode
-                                    ? "size-7 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-950/40 dark:text-blue-300 dark:hover:bg-blue-950/60"
+                                    ? "size-7 border border-primary/20 bg-primary/10 text-primary hover:bg-primary/15"
                                     : "size-7"
                                 }
                                 aria-label={
diff --git a/src/components/sessions/SessionMessageItem.tsx b/src/components/sessions/SessionMessageItem.tsx
index 1dd4d2b620..25be16a8ea 100644
--- a/src/components/sessions/SessionMessageItem.tsx
+++ b/src/components/sessions/SessionMessageItem.tsx
@@ -40,9 +40,9 @@ export function SessionMessageItem({
       className={cn(
         "rounded-lg border px-3 py-2.5 relative group transition-all min-w-0",
         message.role.toLowerCase() === "user"
-          ? "bg-primary/5 border-primary/20 ml-8"
+          ? "bg-accent/40 border-accent/60 ml-8"
           : message.role.toLowerCase() === "assistant"
-            ? "bg-blue-500/5 border-blue-500/20 mr-8"
+            ? "bg-primary/5 border-primary/20 mr-8"
             : "bg-muted/40 border-border/60",
         isActive && "ring-2 ring-primary ring-offset-2",
       )}
diff --git a/src/components/sessions/utils.ts b/src/components/sessions/utils.ts
index 1c2c677a9f..f32dc48b71 100644
--- a/src/components/sessions/utils.ts
+++ b/src/components/sessions/utils.ts
@@ -57,10 +57,10 @@ export const getProviderIconName = (providerId: string) => {
 
 export const getRoleTone = (role: string) => {
   const normalized = role.toLowerCase();
-  if (normalized === "assistant") return "text-blue-500";
-  if (normalized === "user") return "text-emerald-500";
-  if (normalized === "system") return "text-amber-500";
-  if (normalized === "tool") return "text-purple-500";
+  if (normalized === "assistant") return "text-primary";
+  if (normalized === "user") return "text-accent-foreground";
+  if (normalized === "system") return "text-[hsl(var(--warning))]";
+  if (normalized === "tool") return "text-[hsl(var(--chart-5))]";
   return "text-muted-foreground";
 };
 
diff --git a/src/components/settings/AboutSection.tsx b/src/components/settings/AboutSection.tsx
index ac0c9ffb2e..b5027a7b3f 100644
--- a/src/components/settings/AboutSection.tsx
+++ b/src/components/settings/AboutSection.tsx
@@ -61,22 +61,20 @@ const ENV_BADGE_CONFIG: Record<
   wsl: {
     labelKey: "settings.envBadge.wsl",
     className:
-      "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",
+      "bg-[hsl(var(--warning)/0.12)] text-[hsl(var(--warning))] border-[hsl(var(--warning)/0.24)]",
   },
   windows: {
     labelKey: "settings.envBadge.windows",
-    className:
-      "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    className: "bg-primary/10 text-primary border-primary/20",
   },
   macos: {
     labelKey: "settings.envBadge.macos",
-    className:
-      "bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20",
+    className: "bg-muted text-muted-foreground border-border/70",
   },
   linux: {
     labelKey: "settings.envBadge.linux",
     className:
-      "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
+      "bg-[hsl(var(--success)/0.12)] text-[hsl(var(--success))] border-[hsl(var(--success)/0.24)]",
   },
 };
 
@@ -533,14 +531,20 @@ export function AboutSection({ isPortable }: AboutSectionProps) {
                     ) : tool?.version ? (
                       tool.latest_version &&
                       tool.version !== tool.latest_version ? (
-                        <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border border-yellow-500/20">
+                        <span className="text-[10px] px-1.5 py-0.5 rounded-full border bg-[hsl(var(--warning)/0.12)] text-[hsl(var(--warning))] border-[hsl(var(--warning)/0.24)]">
                           {tool.latest_version}
                         </span>
                       ) : (
-                        <CheckCircle2 className="h-4 w-4 text-green-500" />
+                        <CheckCircle2
+                          className="h-4 w-4"
+                          style={{ color: "hsl(var(--success))" }}
+                        />
                       )
                     ) : (
-                      <AlertCircle className="h-4 w-4 text-yellow-500" />
+                      <AlertCircle
+                        className="h-4 w-4"
+                        style={{ color: "hsl(var(--warning))" }}
+                      />
                     )}
                   </div>
                   <div
diff --git a/src/components/settings/ImportExportSection.tsx b/src/components/settings/ImportExportSection.tsx
index 9b0e619917..4502af0f88 100644
--- a/src/components/settings/ImportExportSection.tsx
+++ b/src/components/settings/ImportExportSection.tsx
@@ -60,7 +60,7 @@ export function ImportExportSection({
           <div className="relative">
             <Button
               type="button"
-              className={`w-full h-auto py-3 px-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white ${selectedFile && !isImporting ? "flex-col items-start" : "items-center"}`}
+              className={`w-full h-auto py-3 px-4 bg-primary hover:bg-primary/90 text-primary-foreground ${selectedFile && !isImporting ? "flex-col items-start" : "items-center"}`}
               onClick={!selectedFile ? onSelectFile : onImport}
               disabled={isImporting}
             >
@@ -92,7 +92,7 @@ export function ImportExportSection({
               <button
                 type="button"
                 onClick={onClear}
-                className="absolute -top-2 -right-2 h-6 w-6 rounded-full bg-red-500 hover:bg-red-600 text-white flex items-center justify-center shadow-lg transition-colors z-10"
+                className="absolute -top-2 -right-2 z-10 flex h-6 w-6 items-center justify-center rounded-full text-white shadow-lg transition-colors bg-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.9)]"
                 aria-label={t("common.clear")}
               >
                 <XCircle className="h-4 w-4" />
@@ -104,7 +104,7 @@ export function ImportExportSection({
           <div>
             <Button
               type="button"
-              className="w-full h-full py-3 px-4 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white items-center"
+              className="w-full h-full py-3 px-4 bg-primary hover:bg-primary/90 text-primary-foreground items-center"
               onClick={onExport}
             >
               <Save className="mr-2 h-4 w-4" />
@@ -146,14 +146,12 @@ function ImportStatusMessage({
   if (status === "importing") {
     return (
       <div
-        className={`${baseClass} border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400`}
+        className={`${baseClass} border-primary/30 bg-primary/10 text-primary`}
       >
         <Loader2 className="mt-0.5 h-5 w-5 flex-shrink-0 animate-spin" />
         <div>
           <p className="font-semibold">{t("settings.importing")}</p>
-          <p className="text-blue-600/80 dark:text-blue-400/80">
-            {t("common.loading")}
-          </p>
+          <p className="text-primary/80">{t("common.loading")}</p>
         </div>
       </div>
     );
@@ -162,17 +160,20 @@ function ImportStatusMessage({
   if (status === "success") {
     return (
       <div
-        className={`${baseClass} border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400`}
+        className={`${baseClass} border-[hsl(var(--success)/0.24)] bg-[hsl(var(--success)/0.12)] text-[hsl(var(--success))]`}
       >
         <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0" />
         <div className="space-y-1.5">
           <p className="font-semibold">{t("settings.importSuccess")}</p>
           {backupId ? (
-            <p className="text-xs text-green-600/80 dark:text-green-400/80">
+            <p
+              className="text-xs"
+              style={{ color: "hsl(var(--success) / 0.8)" }}
+            >
               {t("settings.backupId")}: {backupId}
             </p>
           ) : null}
-          <p className="text-green-600/80 dark:text-green-400/80">
+          <p style={{ color: "hsl(var(--success) / 0.8)" }}>
             {t("settings.autoReload")}
           </p>
         </div>
@@ -183,12 +184,12 @@ function ImportStatusMessage({
   if (status === "partial-success") {
     return (
       <div
-        className={`${baseClass} border-yellow-500/30 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400`}
+        className={`${baseClass} border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.12)] text-[hsl(var(--warning))]`}
       >
         <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
         <div className="space-y-1.5">
           <p className="font-semibold">{t("settings.importPartialSuccess")}</p>
-          <p className="text-yellow-600/80 dark:text-yellow-400/80">
+          <p style={{ color: "hsl(var(--warning) / 0.8)" }}>
             {t("settings.importPartialHint")}
           </p>
         </div>
@@ -200,12 +201,12 @@ function ImportStatusMessage({
 
   return (
     <div
-      className={`${baseClass} border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400`}
+      className={`${baseClass} border-[hsl(var(--destructive)/0.24)] bg-[hsl(var(--destructive)/0.12)] text-[hsl(var(--destructive))]`}
     >
       <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
       <div className="space-y-1.5">
         <p className="font-semibold">{t("settings.importFailed")}</p>
-        <p className="text-red-600/80 dark:text-red-400/80">{message}</p>
+        <p style={{ color: "hsl(var(--destructive) / 0.8)" }}>{message}</p>
       </div>
     </div>
   );
diff --git a/src/components/settings/LogConfigPanel.tsx b/src/components/settings/LogConfigPanel.tsx
index fa71885d0c..cfd97a9973 100644
--- a/src/components/settings/LogConfigPanel.tsx
+++ b/src/components/settings/LogConfigPanel.tsx
@@ -93,23 +93,25 @@ export function LogConfigPanel() {
         </p>
         <div className="grid gap-1 text-muted-foreground">
           <p>
-            <span className="font-mono text-red-500">error</span> -{" "}
-            {t("settings.advanced.logConfig.levelDesc.error")}
+            <span className="font-mono text-[hsl(var(--destructive))]">
+              error
+            </span>{" "}
+            - {t("settings.advanced.logConfig.levelDesc.error")}
           </p>
           <p>
-            <span className="font-mono text-orange-500">warn</span> -{" "}
+            <span className="font-mono text-[hsl(var(--warning))]">warn</span> -{" "}
             {t("settings.advanced.logConfig.levelDesc.warn")}
           </p>
           <p>
-            <span className="font-mono text-blue-500">info</span> -{" "}
+            <span className="font-mono text-primary">info</span> -{" "}
             {t("settings.advanced.logConfig.levelDesc.info")}
           </p>
           <p>
-            <span className="font-mono text-green-500">debug</span> -{" "}
-            {t("settings.advanced.logConfig.levelDesc.debug")}
+            <span className="font-mono text-[hsl(var(--success))]">debug</span>{" "}
+            - {t("settings.advanced.logConfig.levelDesc.debug")}
           </p>
           <p>
-            <span className="font-mono text-gray-500">trace</span> -{" "}
+            <span className="font-mono text-muted-foreground">trace</span> -{" "}
             {t("settings.advanced.logConfig.levelDesc.trace")}
           </p>
         </div>
diff --git a/src/components/settings/ProxyTabContent.tsx b/src/components/settings/ProxyTabContent.tsx
index 08ba6543b5..fd58a29989 100644
--- a/src/components/settings/ProxyTabContent.tsx
+++ b/src/components/settings/ProxyTabContent.tsx
@@ -96,7 +96,7 @@ export function ProxyTabContent({
         >
           <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
             <div className="flex items-center gap-3">
-              <Server className="h-5 w-5 text-green-500" />
+              <Server className="h-5 w-5 text-[hsl(var(--success))]" />
               <div className="text-left">
                 <h3 className="text-base font-semibold">
                   {t("settings.advanced.proxy.title")}
@@ -137,7 +137,7 @@ export function ProxyTabContent({
         >
           <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
             <div className="flex items-center gap-3">
-              <Activity className="h-5 w-5 text-orange-500" />
+              <Activity className="h-5 w-5 text-[hsl(var(--warning))]" />
               <div className="text-left">
                 <h3 className="text-base font-semibold">
                   {t("settings.advanced.failover.title")}
@@ -151,7 +151,9 @@ export function ProxyTabContent({
           <AccordionContent className="px-6 pb-6 pt-4 border-t border-border/50">
             <div className="space-y-6">
               <ToggleRow
-                icon={<ShieldAlert className="h-4 w-4 text-orange-500" />}
+                icon={
+                  <ShieldAlert className="h-4 w-4 text-[hsl(var(--warning))]" />
+                }
                 title={t("settings.advanced.proxy.enableFailoverToggle")}
                 description={t(
                   "settings.advanced.proxy.enableFailoverToggleDescription",
@@ -161,8 +163,8 @@ export function ProxyTabContent({
               />
 
               {!isRunning && (
-                <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-                  <p className="text-sm text-yellow-600 dark:text-yellow-400">
+                <div className="rounded-lg border border-[hsl(var(--warning)/0.24)] bg-[hsl(var(--warning)/0.12)] p-4">
+                  <p className="text-sm text-[hsl(var(--warning))]">
                     {t("proxy.failover.proxyRequired", {
                       defaultValue: "需要先启动代理服务才能配置故障转移",
                     })}
@@ -254,7 +256,7 @@ export function ProxyTabContent({
         >
           <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
             <div className="flex items-center gap-3">
-              <Zap className="h-5 w-5 text-purple-500" />
+              <Zap className="h-5 w-5 text-[hsl(var(--chart-5))]" />
               <div className="text-left">
                 <h3 className="text-base font-semibold">
                   {t("settings.advanced.rectifier.title")}
@@ -277,7 +279,7 @@ export function ProxyTabContent({
         >
           <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
             <div className="flex items-center gap-3">
-              <Globe className="h-5 w-5 text-cyan-500" />
+              <Globe className="h-5 w-5 text-[hsl(var(--chart-4))]" />
               <div className="text-left">
                 <h3 className="text-base font-semibold">
                   {t("settings.advanced.globalProxy.title")}
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index d10e57f304..c0088bb96d 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -329,7 +329,7 @@ export function SettingsPage({
                       >
                         <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
                           <div className="flex items-center gap-3">
-                            <Database className="h-5 w-5 text-blue-500" />
+                            <Database className="h-5 w-5 text-primary" />
                             <div className="text-left">
                               <h3 className="text-base font-semibold">
                                 {t("settings.advanced.data.title")}
@@ -361,7 +361,7 @@ export function SettingsPage({
                       >
                         <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
                           <div className="flex items-center gap-3">
-                            <HardDriveDownload className="h-5 w-5 text-amber-500" />
+                            <HardDriveDownload className="h-5 w-5 text-accent-foreground" />
                             <div className="text-left">
                               <h3 className="text-base font-semibold">
                                 {t("settings.advanced.backup.title", {
@@ -394,7 +394,7 @@ export function SettingsPage({
                       >
                         <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
                           <div className="flex items-center gap-3">
-                            <Cloud className="h-5 w-5 text-blue-500" />
+                            <Cloud className="h-5 w-5 text-primary" />
                             <div className="text-left">
                               <h3 className="text-base font-semibold">
                                 {t("settings.advanced.cloudSync.title")}
@@ -420,7 +420,7 @@ export function SettingsPage({
                       >
                         <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
                           <div className="flex items-center gap-3">
-                            <FlaskConical className="h-5 w-5 text-emerald-500" />
+                            <FlaskConical className="h-5 w-5 text-primary" />
                             <div className="text-left">
                               <h3 className="text-base font-semibold">
                                 {t("settings.advanced.modelTest.title")}
@@ -442,7 +442,7 @@ export function SettingsPage({
                       >
                         <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
                           <div className="flex items-center gap-3">
-                            <ScrollText className="h-5 w-5 text-cyan-500" />
+                            <ScrollText className="h-5 w-5 text-[hsl(var(--chart-4))]" />
                             <div className="text-left">
                               <h3 className="text-base font-semibold">
                                 {t("settings.advanced.logConfig.title")}
diff --git a/src/components/settings/ThemeSettings.tsx b/src/components/settings/ThemeSettings.tsx
index f22c51d69c..90dcb775a2 100644
--- a/src/components/settings/ThemeSettings.tsx
+++ b/src/components/settings/ThemeSettings.tsx
@@ -1,43 +1,632 @@
-import { Monitor, Moon, Sun } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import {
+  ChevronDown,
+  ChevronRight,
+  Monitor,
+  Moon,
+  Search,
+  Sparkles,
+  Sun,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@/components/theme-provider";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  type CustomThemePalette,
+  getReadableTextColor,
+  hexToHsv,
+  hexToRgb,
+  hsvToHex,
+  isHexColor,
+  mixHex,
+  normalizeHex,
+} from "@/lib/theme/customTheme";
+import { cn } from "@/lib/utils";
+
+const CUSTOM_THEME_FIELDS = [
+  { key: "background", labelKey: "settings.themeColorBackground" },
+  { key: "foreground", labelKey: "settings.themeColorForeground" },
+  { key: "primary", labelKey: "settings.themeColorPrimary" },
+  {
+    key: "primaryForeground",
+    labelKey: "settings.themeColorPrimaryForeground",
+  },
+  { key: "secondary", labelKey: "settings.themeColorSecondary" },
+  {
+    key: "secondaryForeground",
+    labelKey: "settings.themeColorSecondaryForeground",
+  },
+  { key: "accent", labelKey: "settings.themeColorAccent" },
+  { key: "accentForeground", labelKey: "settings.themeColorAccentForeground" },
+  { key: "card", labelKey: "settings.themeColorCard" },
+  { key: "cardForeground", labelKey: "settings.themeColorCardForeground" },
+  { key: "popover", labelKey: "settings.themeColorPopover" },
+  {
+    key: "popoverForeground",
+    labelKey: "settings.themeColorPopoverForeground",
+  },
+  { key: "muted", labelKey: "settings.themeColorMuted" },
+  { key: "mutedForeground", labelKey: "settings.themeColorMutedForeground" },
+  { key: "destructive", labelKey: "settings.themeColorDestructive" },
+  {
+    key: "destructiveForeground",
+    labelKey: "settings.themeColorDestructiveForeground",
+  },
+  { key: "success", labelKey: "settings.themeColorSuccess" },
+  { key: "info", labelKey: "settings.themeColorInfo" },
+  { key: "warning", labelKey: "settings.themeColorWarning" },
+  { key: "error", labelKey: "settings.themeColorError" },
+  { key: "border", labelKey: "settings.themeColorBorder" },
+  { key: "input", labelKey: "settings.themeColorInput" },
+  { key: "ring", labelKey: "settings.themeColorRing" },
+] as const;
+const SECTION_DEFINITIONS = [
+  {
+    id: "primary",
+    titleKey: "settings.themeSectionPrimary",
+    rowKeys: ["primary", "primaryForeground"] as const,
+  },
+  {
+    id: "secondary",
+    titleKey: "settings.themeSectionSecondary",
+    rowKeys: ["secondary", "secondaryForeground"] as const,
+  },
+  {
+    id: "accent",
+    titleKey: "settings.themeSectionAccent",
+    rowKeys: ["accent", "accentForeground"] as const,
+  },
+  {
+    id: "base",
+    titleKey: "settings.themeSectionBase",
+    rowKeys: ["background", "foreground"] as const,
+  },
+  {
+    id: "card",
+    titleKey: "settings.themeSectionCard",
+    rowKeys: ["card", "cardForeground"] as const,
+  },
+  {
+    id: "popover",
+    titleKey: "settings.themeSectionPopover",
+    rowKeys: ["popover", "popoverForeground"] as const,
+  },
+  {
+    id: "muted",
+    titleKey: "settings.themeSectionMuted",
+    rowKeys: ["muted", "mutedForeground"] as const,
+  },
+  {
+    id: "destructive",
+    titleKey: "settings.themeSectionDestructive",
+    rowKeys: ["destructive", "destructiveForeground"] as const,
+  },
+  {
+    id: "borderInput",
+    titleKey: "settings.themeSectionBorderInput",
+    rowKeys: ["border", "input", "ring"] as const,
+  },
+  {
+    id: "semantic",
+    titleKey: "settings.themeSectionSemanticAdvanced",
+    rowKeys: ["success", "info", "warning", "error"] as const,
+    allowSync: false,
+  },
+] as const;
+const QUICK_COLOR_SWATCHES = [
+  "#ffffff",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#a1a1aa",
+  "#18181b",
+  "#000000",
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#14b8a6",
+  "#0ea5e9",
+  "#6366f1",
+  "#8b5cf6",
+  "#d946ef",
+  "#ec4899",
+] as const;
+const PRESET_SWATCHES = {
+  default: ["#ffffff", "#1f9cff", "#f4f4f5"],
+  bubblegum: ["#fff1f7", "#f25ca8", "#ffd6a3"],
+} as const;
+
+type EditablePaletteMode = "light" | "dark";
+type CustomThemeFieldKey = (typeof CUSTOM_THEME_FIELDS)[number]["key"];
+type ThemeSectionId = (typeof SECTION_DEFINITIONS)[number]["id"];
+
+function getFieldLabelKey(fieldKey: CustomThemeFieldKey) {
+  return (
+    CUSTOM_THEME_FIELDS.find((field) => field.key === fieldKey)?.labelKey ??
+    "settings.themeColorBackground"
+  );
+}
+
+function getAutoColorForField(
+  fieldKey: CustomThemeFieldKey,
+  palette: CustomThemePalette,
+) {
+  switch (fieldKey) {
+    case "foreground":
+      return getReadableTextColor(palette.background);
+    case "primaryForeground":
+      return getReadableTextColor(palette.primary);
+    case "secondaryForeground":
+      return getReadableTextColor(palette.secondary);
+    case "accentForeground":
+      return getReadableTextColor(palette.accent);
+    case "cardForeground":
+      return getReadableTextColor(palette.card);
+    case "popoverForeground":
+      return getReadableTextColor(palette.popover);
+    case "mutedForeground":
+      return getReadableTextColor(palette.muted);
+    case "destructiveForeground":
+      return getReadableTextColor(palette.destructive);
+    case "input":
+      return palette.border;
+    case "ring":
+      return palette.primary;
+    default:
+      return null;
+  }
+}
+
+function getSectionSyncValues(
+  sectionId: ThemeSectionId,
+  palette: CustomThemePalette,
+): Partial<CustomThemePalette> {
+  switch (sectionId) {
+    case "primary":
+      return { primaryForeground: getReadableTextColor(palette.primary) };
+    case "secondary":
+      return { secondaryForeground: getReadableTextColor(palette.secondary) };
+    case "accent":
+      return { accentForeground: getReadableTextColor(palette.accent) };
+    case "base":
+      return { foreground: getReadableTextColor(palette.background) };
+    case "card":
+      return { cardForeground: getReadableTextColor(palette.card) };
+    case "popover":
+      return { popoverForeground: getReadableTextColor(palette.popover) };
+    case "muted":
+      return { mutedForeground: getReadableTextColor(palette.muted) };
+    case "destructive":
+      return {
+        destructiveForeground: getReadableTextColor(palette.destructive),
+      };
+    case "semantic":
+      return {};
+    case "borderInput":
+      return {
+        input: palette.border,
+        ring: palette.primary,
+      };
+    default:
+      return {};
+  }
+}
 
 export function ThemeSettings() {
   const { t } = useTranslation();
-  const { theme, setTheme } = useTheme();
+  const {
+    theme,
+    themePreset,
+    customTheme,
+    setTheme,
+    setThemePreset,
+    setCustomThemeColor,
+    setCustomThemeColors,
+    resetCustomTheme,
+  } = useTheme();
+  const [systemPrefersDark, setSystemPrefersDark] = useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return false;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  const [customEditorOpen, setCustomEditorOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [openSections, setOpenSections] = useState<
+    Record<ThemeSectionId, boolean>
+  >({
+    primary: false,
+    secondary: false,
+    accent: false,
+    base: false,
+    card: false,
+    popover: false,
+    muted: false,
+    destructive: false,
+    semantic: false,
+    borderInput: false,
+  });
+
+  const filteredSections = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    return SECTION_DEFINITIONS.map((section) => {
+      const rows = section.rowKeys.filter((fieldKey) => {
+        if (!query) return true;
+        const sectionLabel = t(section.titleKey).toLowerCase();
+        const fieldLabel = t(getFieldLabelKey(fieldKey)).toLowerCase();
+        return (
+          sectionLabel.includes(query) ||
+          fieldLabel.includes(query) ||
+          fieldKey.toLowerCase().includes(query)
+        );
+      });
+      return {
+        ...section,
+        allowSync: "allowSync" in section ? section.allowSync : true,
+        rows,
+      };
+    }).filter((section) => section.rows.length > 0);
+  }, [searchQuery, t]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) =>
+      setSystemPrefersDark(event.matches);
+
+    setSystemPrefersDark(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  const resolvedPaletteMode: EditablePaletteMode =
+    theme === "system" ? (systemPrefersDark ? "dark" : "light") : theme;
+  const currentPalette = customTheme.light;
+  const previewPalette =
+    resolvedPaletteMode === "dark" ? customTheme.dark : currentPalette;
 
   return (
-    <section className="space-y-2">
+    <section className="space-y-4">
       <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")}
         </p>
       </header>
-      <div className="inline-flex gap-1 rounded-md border border-border-default bg-background p-1">
-        <ThemeButton
-          active={theme === "light"}
-          onClick={(e) => setTheme("light", e)}
-          icon={Sun}
-        >
-          {t("settings.themeLight")}
-        </ThemeButton>
-        <ThemeButton
-          active={theme === "dark"}
-          onClick={(e) => setTheme("dark", e)}
-          icon={Moon}
-        >
-          {t("settings.themeDark")}
-        </ThemeButton>
-        <ThemeButton
-          active={theme === "system"}
-          onClick={(e) => setTheme("system", e)}
-          icon={Monitor}
-        >
-          {t("settings.themeSystem")}
-        </ThemeButton>
+      <div className="space-y-3">
+        <div className="inline-flex gap-1 rounded-xl border border-border-default bg-background p-1">
+          <ThemeButton
+            active={theme === "light"}
+            onClick={(e) => setTheme("light", e)}
+            icon={Sun}
+          >
+            {t("settings.themeLight")}
+          </ThemeButton>
+          <ThemeButton
+            active={theme === "dark"}
+            onClick={(e) => setTheme("dark", e)}
+            icon={Moon}
+          >
+            {t("settings.themeDark")}
+          </ThemeButton>
+          <ThemeButton
+            active={theme === "system"}
+            onClick={(e) => setTheme("system", e)}
+            icon={Monitor}
+          >
+            {t("settings.themeSystem")}
+          </ThemeButton>
+        </div>
+
+        <div className="space-y-1.5">
+          <h4 className="text-sm font-medium text-foreground">
+            {t("settings.themePreset")}
+          </h4>
+          <p className="text-xs text-muted-foreground">
+            {t("settings.themePresetHint")}
+          </p>
+          <div className="grid gap-2 md:grid-cols-3">
+            <PresetCard
+              active={themePreset === "default"}
+              name={t("settings.themePresetDefault")}
+              description={t("settings.themePresetDefaultDescription")}
+              swatches={[...PRESET_SWATCHES.default]}
+              useInlineSwatches
+              onClick={() => setThemePreset("default")}
+            />
+            <PresetCard
+              active={themePreset === "bubblegum"}
+              name={t("settings.themePresetBubblegum")}
+              description={t("settings.themePresetBubblegumDescription")}
+              swatches={[...PRESET_SWATCHES.bubblegum]}
+              useInlineSwatches
+              onClick={() => setThemePreset("bubblegum")}
+            />
+            <PresetCard
+              active={themePreset === "custom"}
+              name={t("settings.themePresetCustom")}
+              description={t("settings.themePresetCustomDescription")}
+              swatches={[
+                customTheme.light.background,
+                customTheme.light.primary,
+                customTheme.light.accent,
+              ]}
+              onClick={() => setThemePreset("custom")}
+              useInlineSwatches
+            />
+          </div>
+        </div>
+
+        {themePreset === "custom" && (
+          <div className="space-y-3">
+            <div className="rounded-2xl border border-border/70 bg-card/55 p-4 shadow-sm">
+              <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+                <div className="space-y-1">
+                  <h4 className="text-sm font-medium text-foreground">
+                    {t("settings.themeCustomPalette")}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {t("settings.themeCustomPaletteHintCollapsed", {
+                      mode:
+                        resolvedPaletteMode === "light"
+                          ? t("settings.themePaletteLight")
+                          : t("settings.themePaletteDark"),
+                    })}
+                  </p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs text-muted-foreground">
+                    {t("settings.themeEditingBasePalette")}
+                  </span>
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={() => setCustomEditorOpen((current) => !current)}
+                  >
+                    {customEditorOpen
+                      ? t("settings.themeEditorCollapse")
+                      : t("settings.themeEditorExpand")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <Collapsible
+              open={customEditorOpen}
+              onOpenChange={setCustomEditorOpen}
+            >
+              <CollapsibleContent className="space-y-0">
+                <div className="grid gap-3 xl:grid-cols-[minmax(0,1.08fr)_minmax(320px,0.92fr)]">
+                  <div className="rounded-2xl border border-border/70 bg-card/55 p-3 shadow-sm">
+                    <div className="space-y-2.5">
+                      <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+                        <div className="space-y-1">
+                          <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                            {t("settings.themeCustomPalette")}
+                          </h4>
+                          <p className="text-xs text-muted-foreground">
+                            {t("settings.themeCustomPaletteHintSingle")}
+                          </p>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs text-muted-foreground">
+                            {t("settings.themeDarkOverlayBadge")}
+                          </span>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => resetCustomTheme("light")}
+                          >
+                            {t("settings.themeCustomPaletteResetBase")}
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div className="relative">
+                        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input
+                          value={searchQuery}
+                          onChange={(event) =>
+                            setSearchQuery(event.target.value)
+                          }
+                          placeholder={t(
+                            "settings.themeEditorSearchPlaceholder",
+                          )}
+                          className="h-10 rounded-xl pl-10"
+                        />
+                      </div>
+
+                      <div className="rounded-2xl border border-border/70 bg-background/60">
+                        <TooltipProvider delayDuration={250}>
+                          <ScrollArea className="h-[520px]">
+                            <div className="space-y-2 p-2.5">
+                              {filteredSections.length === 0 && (
+                                <div className="rounded-xl border border-dashed border-border/70 bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground">
+                                  {t("settings.themeEditorNoResults")}
+                                </div>
+                              )}
+
+                              {filteredSections.map((section) => {
+                                const forcedOpen =
+                                  searchQuery.trim().length > 0;
+                                const isOpen =
+                                  forcedOpen || openSections[section.id];
+                                const canSync = section.allowSync !== false;
+                                const previewColors = section.rows
+                                  .map((fieldKey) => currentPalette[fieldKey])
+                                  .slice(0, section.id === "semantic" ? 4 : 3);
+                                return (
+                                  <Collapsible
+                                    key={section.id}
+                                    open={isOpen}
+                                    onOpenChange={(nextOpen) =>
+                                      setOpenSections((current) => ({
+                                        ...current,
+                                        [section.id]: nextOpen,
+                                      }))
+                                    }
+                                  >
+                                    <div className="rounded-xl border border-border/60 bg-background/85 px-2.5 py-2 shadow-sm">
+                                      <div className="flex items-center gap-3">
+                                        <CollapsibleTrigger asChild>
+                                          <button
+                                            type="button"
+                                            className="flex w-full min-w-0 flex-1 items-center gap-3 rounded-lg px-1 py-1 text-left transition-colors hover:text-foreground"
+                                          >
+                                            {isOpen ? (
+                                              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                            ) : (
+                                              <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+                                            )}
+                                            <div className="min-w-0 flex-1">
+                                              <div className="text-sm font-semibold text-foreground">
+                                                {t(section.titleKey)}
+                                              </div>
+                                              <div className="mt-0.5 text-xs text-muted-foreground">
+                                                {section.rows.length}{" "}
+                                                {t(
+                                                  "settings.themeSectionTokens",
+                                                )}
+                                              </div>
+                                            </div>
+                                            <div className="flex items-center gap-1.5">
+                                              {previewColors.map(
+                                                (color, index) => (
+                                                  <span
+                                                    key={`${section.id}-${index}`}
+                                                    className="h-6 w-6 rounded-full border border-border/70 shadow-sm"
+                                                    style={{
+                                                      backgroundColor: color,
+                                                    }}
+                                                  />
+                                                ),
+                                              )}
+                                            </div>
+                                          </button>
+                                        </CollapsibleTrigger>
+                                        {canSync ? (
+                                          <Tooltip>
+                                            <TooltipTrigger asChild>
+                                              <Button
+                                                type="button"
+                                                variant="outline"
+                                                size="icon"
+                                                className="h-9 w-9 shrink-0 rounded-lg border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground"
+                                                aria-label={t(
+                                                  "settings.themeSyncSection",
+                                                )}
+                                                onClick={() =>
+                                                  setCustomThemeColors(
+                                                    "light",
+                                                    getSectionSyncValues(
+                                                      section.id,
+                                                      currentPalette,
+                                                    ),
+                                                  )
+                                                }
+                                              >
+                                                <Sparkles className="h-4 w-4" />
+                                              </Button>
+                                            </TooltipTrigger>
+                                            <TooltipContent side="left">
+                                              {t(
+                                                "settings.themeSyncSectionTooltip",
+                                              )}
+                                            </TooltipContent>
+                                          </Tooltip>
+                                        ) : (
+                                          <div className="h-9 w-9 shrink-0" />
+                                        )}
+                                      </div>
+
+                                      <CollapsibleContent className="space-y-1.5 pt-1.5">
+                                        {section.rows.map((fieldKey) => (
+                                          <ColorRow
+                                            key={`light-${fieldKey}`}
+                                            label={t(
+                                              getFieldLabelKey(fieldKey),
+                                            )}
+                                            value={currentPalette[fieldKey]}
+                                            onChange={(value) =>
+                                              setCustomThemeColor(
+                                                "light",
+                                                fieldKey,
+                                                value,
+                                              )
+                                            }
+                                            onAutoApply={() => {
+                                              const autoColor =
+                                                getAutoColorForField(
+                                                  fieldKey,
+                                                  currentPalette,
+                                                );
+                                              if (!autoColor) return;
+                                              setCustomThemeColor(
+                                                "light",
+                                                fieldKey,
+                                                autoColor,
+                                              );
+                                            }}
+                                            showAutoAction={
+                                              getAutoColorForField(
+                                                fieldKey,
+                                                currentPalette,
+                                              ) !== null
+                                            }
+                                            autoLabel={t(
+                                              "settings.themeAutoSync",
+                                            )}
+                                            quickColors={QUICK_COLOR_SWATCHES}
+                                          />
+                                        ))}
+                                      </CollapsibleContent>
+                                    </div>
+                                  </Collapsible>
+                                );
+                              })}
+                            </div>
+                          </ScrollArea>
+                        </TooltipProvider>
+                      </div>
+
+                      <div className="rounded-xl border border-border/60 bg-muted/35 px-3 py-2 text-xs text-muted-foreground">
+                        {t("settings.themeCustomPaletteTip")}
+                      </div>
+                    </div>
+                  </div>
+
+                  <ThemePreviewPanel
+                    mode={resolvedPaletteMode}
+                    palette={previewPalette}
+                    t={t}
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        )}
       </div>
     </section>
   );
@@ -66,7 +655,7 @@ function ThemeButton({
         "min-w-[96px] gap-1.5",
         active
           ? "shadow-sm"
-          : "text-muted-foreground hover:text-foreground hover:bg-muted",
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
       )}
     >
       <Icon className="h-3.5 w-3.5" />
@@ -74,3 +663,759 @@ function ThemeButton({
     </Button>
   );
 }
+
+interface PresetCardProps {
+  active: boolean;
+  name: string;
+  description: string;
+  swatches: string[];
+  onClick: () => void;
+  useInlineSwatches?: boolean;
+}
+
+function PresetCard({
+  active,
+  name,
+  description,
+  swatches,
+  onClick,
+  useInlineSwatches = false,
+}: PresetCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-lg border bg-card p-3 text-left transition-colors",
+        active
+          ? "border-primary ring-1 ring-primary/30"
+          : "border-border-default hover:border-border-hover hover:bg-muted/30",
+      )}
+    >
+      <div className="mb-3 flex items-center justify-between gap-4">
+        <div className="text-sm font-medium text-foreground">{name}</div>
+        <div className="flex items-center gap-2">
+          {swatches.map((swatchClass, index) => (
+            <span
+              key={`${name}-${index}`}
+              className={cn(
+                "h-5 w-5 rounded-full border border-border/60 shadow-sm",
+                !useInlineSwatches && swatchClass,
+              )}
+              style={
+                useInlineSwatches ? { backgroundColor: swatchClass } : undefined
+              }
+            />
+          ))}
+        </div>
+      </div>
+      <div className="space-y-1">
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+interface ColorRowProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  onAutoApply: () => void;
+  showAutoAction: boolean;
+  autoLabel: string;
+  quickColors: readonly string[];
+}
+
+function ColorRow({
+  label,
+  value,
+  onChange,
+  onAutoApply,
+  showAutoAction,
+  autoLabel,
+  quickColors,
+}: ColorRowProps) {
+  const { t } = useTranslation();
+  const [draftValue, setDraftValue] = useState(value);
+
+  useEffect(() => {
+    setDraftValue(value);
+  }, [value]);
+
+  const commitDraft = () => {
+    const normalized = normalizeHex(draftValue);
+    if (!isHexColor(normalized)) {
+      setDraftValue(value);
+      return;
+    }
+
+    setDraftValue(normalized);
+    onChange(normalized);
+  };
+
+  return (
+    <div className="grid grid-cols-[auto_minmax(80px,132px)_minmax(0,1fr)_auto] items-center gap-2.5 rounded-xl border border-border/60 bg-background/70 px-2.5 py-2">
+      <ColorPopover
+        label={label}
+        value={value}
+        onChange={(nextValue) => {
+          setDraftValue(nextValue);
+          onChange(nextValue);
+        }}
+        quickColors={quickColors}
+        t={t}
+      />
+      <div className="min-w-0 text-sm font-medium text-foreground">{label}</div>
+      <Input
+        value={draftValue}
+        onChange={(event) => setDraftValue(event.target.value)}
+        onBlur={commitDraft}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitDraft();
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            setDraftValue(value);
+          }
+        }}
+        className="h-10 rounded-xl border-border/70 bg-card/40 font-mono text-sm"
+      />
+      {showAutoAction ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-9 w-9 rounded-xl"
+              aria-label={autoLabel}
+              onClick={onAutoApply}
+            >
+              <Sparkles className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            {t("settings.themeAutoSyncTooltip")}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        <div className="h-9 w-9" />
+      )}
+    </div>
+  );
+}
+
+interface ColorPopoverProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  quickColors: readonly string[];
+  t: (key: string) => string;
+}
+
+function ColorPopover({
+  label,
+  value,
+  onChange,
+  quickColors,
+  t,
+}: ColorPopoverProps) {
+  const squareRef = useRef<HTMLDivElement | null>(null);
+  const hueRef = useRef<HTMLDivElement | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+  const [draftValue, setDraftValue] = useState(value);
+  const hsv = useMemo(() => hexToHsv(value), [value]);
+  const hueColor = useMemo(() => hsvToHex(hsv.h, 1, 1), [hsv.h]);
+
+  useEffect(() => {
+    setDraftValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+      dragCleanupRef.current = null;
+    };
+  }, []);
+
+  const clearDragListeners = () => {
+    dragCleanupRef.current?.();
+    dragCleanupRef.current = null;
+  };
+
+  const commitDraft = (nextValue = draftValue) => {
+    const normalized = normalizeHex(nextValue);
+    if (!isHexColor(normalized)) {
+      setDraftValue(value);
+      return;
+    }
+
+    setDraftValue(normalized);
+    onChange(normalized);
+  };
+
+  const updateFromSquare = (clientX: number, clientY: number) => {
+    const rect = squareRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
+    const y = Math.max(0, Math.min(rect.height, clientY - rect.top));
+    const saturation = rect.width === 0 ? 0 : x / rect.width;
+    const brightness = rect.height === 0 ? 0 : 1 - y / rect.height;
+    onChange(hsvToHex(hsv.h, saturation, brightness));
+  };
+
+  const updateFromHue = (clientX: number) => {
+    const rect = hueRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
+    const hue = rect.width === 0 ? 0 : (x / rect.width) * 360;
+    onChange(hsvToHex(hue, hsv.s, hsv.v));
+  };
+
+  const startDrag = (
+    event: React.PointerEvent,
+    updater: (clientX: number, clientY: number) => void,
+  ) => {
+    event.preventDefault();
+    clearDragListeners();
+    updater(event.clientX, event.clientY);
+
+    const handleMove = (moveEvent: PointerEvent) =>
+      updater(moveEvent.clientX, moveEvent.clientY);
+    const handleUp = () => {
+      clearDragListeners();
+    };
+
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    window.addEventListener("pointercancel", handleUp);
+    dragCleanupRef.current = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+      window.removeEventListener("pointercancel", handleUp);
+    };
+  };
+
+  const handleSquareKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 0.1 : 0.05;
+    let nextS = hsv.s;
+    let nextV = hsv.v;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        nextS = Math.max(0, hsv.s - step);
+        break;
+      case "ArrowRight":
+        nextS = Math.min(1, hsv.s + step);
+        break;
+      case "ArrowUp":
+        nextV = Math.min(1, hsv.v + step);
+        break;
+      case "ArrowDown":
+        nextV = Math.max(0, hsv.v - step);
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    onChange(hsvToHex(hsv.h, nextS, nextV));
+  };
+
+  const handleHueKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 15 : 5;
+    let nextHue = hsv.h;
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        nextHue = (hsv.h - step + 360) % 360;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        nextHue = (hsv.h + step) % 360;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    onChange(hsvToHex(nextHue, hsv.s, hsv.v));
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="h-10 w-10 rounded-2xl border border-border/70 shadow-sm transition-transform hover:scale-[1.02]"
+          style={{ backgroundColor: value }}
+          aria-label={label}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-[19rem] rounded-2xl border-border/70 p-3">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-sm font-semibold text-foreground">
+                {label}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {value.toUpperCase()}
+              </div>
+            </div>
+            <div
+              className="h-10 w-10 rounded-xl border border-border/70 shadow-sm"
+              style={{ backgroundColor: value }}
+            />
+          </div>
+
+          <label className="block space-y-1.5">
+            <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              {t("settings.themeColorHex")}
+            </span>
+            <Input
+              value={draftValue}
+              onChange={(event) => setDraftValue(event.target.value)}
+              onBlur={() => commitDraft()}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  commitDraft();
+                } else if (event.key === "Escape") {
+                  event.preventDefault();
+                  setDraftValue(value);
+                }
+              }}
+              aria-label={`${label} ${t("settings.themeColorHex")}`}
+              className="h-9 rounded-xl font-mono"
+            />
+          </label>
+
+          <div className="space-y-2.5">
+            <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              {t("settings.themeColorField")}
+            </div>
+            <div
+              ref={squareRef}
+              role="slider"
+              tabIndex={0}
+              aria-label={`${label} ${t("settings.themeColorField")}`}
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={Math.round(hsv.s * 100)}
+              className="relative h-36 w-full cursor-crosshair overflow-hidden rounded-xl border border-border/70"
+              style={{ backgroundColor: hueColor }}
+              onPointerDown={(event) => startDrag(event, updateFromSquare)}
+              onKeyDown={handleSquareKeyDown}
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-white via-transparent to-transparent" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent" />
+              <div
+                className="absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(17,24,39,0.32)]"
+                style={{
+                  left: `${hsv.s * 100}%`,
+                  top: `${(1 - hsv.v) * 100}%`,
+                  backgroundColor: value,
+                }}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t("settings.themeColorHue")}
+                </span>
+                <span className="font-mono text-xs text-muted-foreground">
+                  {Math.round(hsv.h)}
+                </span>
+              </div>
+              <div
+                ref={hueRef}
+                role="slider"
+                tabIndex={0}
+                aria-label={`${label} ${t("settings.themeColorHue")}`}
+                aria-valuemin={0}
+                aria-valuemax={360}
+                aria-valuenow={Math.round(hsv.h)}
+                className="relative h-3.5 w-full cursor-ew-resize rounded-full border border-border/70"
+                style={{
+                  background:
+                    "linear-gradient(90deg, #ff0000 0%, #ffff00 16.6%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.6%, #ff00ff 83.3%, #ff0000 100%)",
+                }}
+                onPointerDown={(event) =>
+                  startDrag(event, (clientX) => updateFromHue(clientX))
+                }
+                onKeyDown={handleHueKeyDown}
+              >
+                <div
+                  className="absolute top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-transparent shadow-[0_0_0_1px_rgba(17,24,39,0.32)]"
+                  style={{ left: `${(hsv.h / 360) * 100}%` }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              {t("settings.themeQuickPicks")}
+            </div>
+            <div className="grid grid-cols-8 gap-1.5">
+              {quickColors.map((color) => (
+                <button
+                  key={`${label}-${color}`}
+                  type="button"
+                  aria-label={`${label} ${color.toUpperCase()}`}
+                  className={cn(
+                    "h-7 w-7 rounded-md border shadow-sm transition-transform hover:scale-105",
+                    value.toLowerCase() === color.toLowerCase()
+                      ? "border-primary ring-2 ring-primary/25"
+                      : "border-border/70",
+                  )}
+                  style={{ backgroundColor: color }}
+                  onClick={() => onChange(color)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ThemePreviewPanel({
+  mode,
+  palette,
+  t,
+}: {
+  mode: EditablePaletteMode;
+  palette: CustomThemePalette;
+  t: (key: string, options?: Record<string, unknown>) => string;
+}) {
+  const statSurface = mixHex(palette.card, palette.background, 0.22);
+  const ringShadow = (() => {
+    const { r, g, b } = hexToRgb(palette.ring);
+    return `0 0 0 3px rgba(${r}, ${g}, ${b}, 0.18)`;
+  })();
+  const previewButtonClass =
+    "inline-flex items-center justify-center rounded-xl px-3 py-2 text-xs font-medium";
+  const previewInputClass =
+    "flex h-10 items-center rounded-xl border bg-transparent px-3 text-sm shadow-none";
+
+  return (
+    <div className="space-y-3 rounded-2xl border border-border/70 bg-card/55 p-4 shadow-sm">
+      <div className="space-y-1">
+        <h4 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {t("settings.themePreview")}
+        </h4>
+        <p className="text-xs text-muted-foreground">
+          {t("settings.themePreviewHint")}
+        </p>
+      </div>
+
+      <div
+        className="overflow-hidden rounded-[28px] border shadow-xl"
+        style={{
+          backgroundColor: palette.background,
+          borderColor: palette.border,
+          color: palette.foreground,
+        }}
+      >
+        <div
+          className="flex items-center justify-between border-b px-4 py-3"
+          style={{ borderColor: palette.border }}
+        >
+          <div>
+            <div className="text-sm font-semibold">CC Switch</div>
+            <div className="text-xs" style={{ color: palette.mutedForeground }}>
+              {mode === "light"
+                ? t("settings.themePaletteLight")
+                : t("settings.themePaletteDark")}
+            </div>
+          </div>
+          <div
+            className="inline-flex items-center justify-center rounded-full px-3 py-1.5 text-xs font-medium shadow-sm"
+            style={{
+              backgroundColor: palette.primary,
+              color: palette.primaryForeground,
+            }}
+          >
+            {t("common.save")}
+          </div>
+        </div>
+
+        <div className="grid gap-3 p-4">
+          <div
+            className="rounded-3xl border p-4"
+            style={{
+              backgroundColor: palette.card,
+              borderColor: palette.border,
+              color: palette.cardForeground,
+            }}
+          >
+            <div className="mb-3 flex items-start justify-between gap-3">
+              <div>
+                <div className="text-sm font-semibold">
+                  {t("settings.themePreviewCardTitle")}
+                </div>
+                <div
+                  className="text-xs"
+                  style={{ color: palette.mutedForeground }}
+                >
+                  {t("settings.themePreviewCardDescription")}
+                </div>
+              </div>
+              <span
+                className="rounded-full px-2.5 py-1 text-[10px] font-semibold"
+                style={{
+                  backgroundColor: palette.accent,
+                  color: palette.accentForeground,
+                }}
+              >
+                {t("common.enabled")}
+              </span>
+            </div>
+
+            <div className="mt-4 space-y-3">
+              <div className="grid gap-3 xl:grid-cols-[minmax(0,0.78fr)_minmax(0,1.22fr)]">
+                <div
+                  className="rounded-2xl border p-3"
+                  style={{
+                    backgroundColor: statSurface,
+                    borderColor: palette.border,
+                  }}
+                >
+                  <div
+                    className="mb-2 text-[11px] font-medium uppercase tracking-wide"
+                    style={{ color: palette.mutedForeground }}
+                  >
+                    {t("settings.themePreviewStatusLabel")}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <span
+                      className="rounded-full px-2.5 py-1 text-[10px] font-semibold"
+                      style={{
+                        backgroundColor: palette.accent,
+                        color: palette.accentForeground,
+                      }}
+                    >
+                      {t("common.enabled")}
+                    </span>
+                    <span
+                      className="rounded-full px-2.5 py-1 text-[10px] font-semibold"
+                      style={{
+                        backgroundColor: palette.secondary,
+                        color: palette.secondaryForeground,
+                        border: `1px solid ${palette.border}`,
+                      }}
+                    >
+                      {t("settings.themePreviewSelected")}
+                    </span>
+                  </div>
+                </div>
+
+                <div
+                  className="rounded-2xl border p-3"
+                  style={{
+                    backgroundColor: palette.popover,
+                    borderColor: palette.input,
+                    color: palette.popoverForeground,
+                  }}
+                >
+                  <div
+                    className="mb-3 text-[11px] font-medium uppercase tracking-wide"
+                    style={{ color: palette.popoverForeground }}
+                  >
+                    {t("settings.themePreviewInputLabel")}
+                  </div>
+
+                  <div className="grid gap-2.5 sm:grid-cols-2">
+                    <div className="space-y-1.5">
+                      <div
+                        className="text-[11px] font-medium uppercase tracking-wide"
+                        style={{ color: palette.mutedForeground }}
+                      >
+                        {t("settings.themePreviewInputDefault")}
+                      </div>
+                      <div
+                        className={previewInputClass}
+                        style={{
+                          backgroundColor: palette.background,
+                          borderColor: palette.input,
+                          color: palette.mutedForeground,
+                        }}
+                      >
+                        {t("settings.themePreviewInputPlaceholder")}
+                      </div>
+                    </div>
+
+                    <div className="space-y-1.5">
+                      <div
+                        className="text-[11px] font-medium uppercase tracking-wide"
+                        style={{ color: palette.mutedForeground }}
+                      >
+                        {t("settings.themePreviewInputFocused")}
+                      </div>
+                      <div
+                        className="rounded-xl"
+                        style={{ boxShadow: ringShadow }}
+                      >
+                        <div
+                          className={previewInputClass}
+                          style={{
+                            backgroundColor: palette.background,
+                            borderColor: palette.ring,
+                            color: palette.popoverForeground,
+                          }}
+                        >
+                          sk-cc-switch-demo
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                className="rounded-2xl border p-3"
+                style={{
+                  backgroundColor: statSurface,
+                  borderColor: palette.border,
+                }}
+              >
+                <div
+                  className="mb-2 text-[11px] font-medium uppercase tracking-wide"
+                  style={{ color: palette.mutedForeground }}
+                >
+                  {t("settings.themePreviewActionsLabel")}
+                </div>
+                <div
+                  className="mb-3 text-xs"
+                  style={{ color: palette.mutedForeground }}
+                >
+                  {t("settings.themePreviewActionsHint")}
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <div
+                    className={`${previewButtonClass} shadow-sm`}
+                    style={{
+                      backgroundColor: palette.primary,
+                      color: palette.primaryForeground,
+                    }}
+                  >
+                    {t("common.confirm")}
+                  </div>
+                  <div
+                    className={`${previewButtonClass} border`}
+                    style={{
+                      backgroundColor: palette.secondary,
+                      borderColor: palette.border,
+                      color: palette.secondaryForeground,
+                    }}
+                  >
+                    {t("common.cancel")}
+                  </div>
+                  <div
+                    className={`${previewButtonClass} border`}
+                    style={{
+                      backgroundColor: palette.accent,
+                      borderColor: palette.border,
+                      color: palette.accentForeground,
+                    }}
+                  >
+                    {t("settings.themePreviewAccent")}
+                  </div>
+                  <div
+                    className={previewButtonClass}
+                    style={{
+                      backgroundColor: palette.destructive,
+                      color: palette.destructiveForeground,
+                    }}
+                  >
+                    {t("settings.themeSectionDestructive")}
+                  </div>
+                </div>
+              </div>
+
+              <div
+                className="rounded-2xl border p-3"
+                style={{
+                  backgroundColor: palette.card,
+                  borderColor: palette.border,
+                }}
+              >
+                <div
+                  className="mb-2 text-[11px] font-medium uppercase tracking-wide"
+                  style={{ color: palette.mutedForeground }}
+                >
+                  {t("settings.themePreviewToastLabel")}
+                </div>
+                <div
+                  className="mb-3 text-xs"
+                  style={{ color: palette.mutedForeground }}
+                >
+                  {t("settings.themePreviewToastHint")}
+                </div>
+
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {[
+                    {
+                      key: "success",
+                      title: t("settings.themePreviewToastSuccess"),
+                      background: mixHex(palette.success, palette.card, 0.88),
+                      border: mixHex(palette.success, palette.card, 0.74),
+                      color: palette.success,
+                    },
+                    {
+                      key: "info",
+                      title: t("settings.themePreviewToastInfo"),
+                      background: mixHex(palette.info, palette.card, 0.88),
+                      border: mixHex(palette.info, palette.card, 0.74),
+                      color: palette.info,
+                    },
+                    {
+                      key: "warning",
+                      title: t("settings.themePreviewToastWarning"),
+                      background: mixHex(palette.warning, palette.card, 0.88),
+                      border: mixHex(palette.warning, palette.card, 0.74),
+                      color: palette.warning,
+                    },
+                    {
+                      key: "error",
+                      title: t("settings.themePreviewToastError"),
+                      background: mixHex(palette.error, palette.card, 0.88),
+                      border: mixHex(palette.error, palette.card, 0.74),
+                      color: palette.error,
+                    },
+                  ].map((toastPreview) => (
+                    <div
+                      key={toastPreview.key}
+                      className="rounded-xl border px-3 py-2.5 shadow-sm"
+                      style={{
+                        backgroundColor: toastPreview.background,
+                        borderColor: toastPreview.border,
+                        color: toastPreview.color,
+                      }}
+                    >
+                      <div className="text-xs font-semibold">
+                        {toastPreview.title}
+                      </div>
+                      <div className="mt-1 text-[11px] opacity-90">
+                        {t("settings.themePreviewToastBody")}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/settings/WebdavSyncSection.tsx b/src/components/settings/WebdavSyncSection.tsx
index 0c072b7374..49758f28c9 100644
--- a/src/components/settings/WebdavSyncSection.tsx
+++ b/src/components/settings/WebdavSyncSection.tsx
@@ -691,12 +691,22 @@ export function WebdavSyncSection({
           </p>
         )}
         {showAutoSyncError && (
-          <div className="rounded-lg border border-red-300/70 bg-red-50/80 px-3 py-2 text-xs text-red-900 dark:border-red-500/50 dark:bg-red-950/30 dark:text-red-200">
+          <div
+            className="rounded-lg border px-3 py-2 text-xs"
+            style={{
+              borderColor: "hsl(var(--destructive) / 0.28)",
+              backgroundColor: "hsl(var(--destructive) / 0.12)",
+              color: "hsl(var(--destructive))",
+            }}
+          >
             <p className="font-medium">
               {t("settings.webdavSync.autoSyncLastErrorTitle")}
             </p>
             <p className="mt-1 break-all whitespace-pre-wrap">{lastError}</p>
-            <p className="mt-1 text-[11px] text-red-700/90 dark:text-red-300/80">
+            <p
+              className="mt-1 text-[11px]"
+              style={{ color: "hsl(var(--destructive) / 0.8)" }}
+            >
               {t("settings.webdavSync.autoSyncLastErrorHint")}
             </p>
           </div>
@@ -729,13 +739,22 @@ export function WebdavSyncSection({
 
           {/* Save status indicator */}
           {dirty && (
-            <span className="inline-flex items-center gap-1.5 text-xs text-amber-500 dark:text-amber-400 animate-in fade-in duration-200">
-              <span className="h-1.5 w-1.5 rounded-full bg-amber-500 dark:bg-amber-400" />
+            <span
+              className="inline-flex items-center gap-1.5 text-xs animate-in fade-in duration-200"
+              style={{ color: "hsl(var(--warning))" }}
+            >
+              <span
+                className="h-1.5 w-1.5 rounded-full"
+                style={{ backgroundColor: "hsl(var(--warning))" }}
+              />
               {t("settings.webdavSync.unsaved")}
             </span>
           )}
           {!dirty && justSaved && (
-            <span className="inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400 animate-in fade-in duration-200">
+            <span
+              className="inline-flex items-center gap-1.5 text-xs animate-in fade-in duration-200"
+              style={{ color: "hsl(var(--success))" }}
+            >
               <Check className="h-3 w-3" />
               {t("settings.webdavSync.saved")}
             </span>
@@ -855,7 +874,10 @@ export function WebdavSyncSection({
                   </p>
                 )}
                 {remoteInfo && remoteIsLegacy && (
-                  <p className="font-medium text-amber-600 dark:text-amber-400">
+                  <p
+                    className="font-medium"
+                    style={{ color: "hsl(var(--warning))" }}
+                  >
                     {t("settings.webdavSync.confirmUpload.legacyNotice")}
                   </p>
                 )}
@@ -925,7 +947,10 @@ export function WebdavSyncSection({
                   </dl>
                 )}
                 {remoteInfo?.layout === "legacy" && (
-                  <p className="font-medium text-amber-600 dark:text-amber-400">
+                  <p
+                    className="font-medium"
+                    style={{ color: "hsl(var(--warning))" }}
+                  >
                     {t("settings.webdavSync.confirmDownload.legacyNotice")}
                   </p>
                 )}
diff --git a/src/components/settings/WindowSettings.tsx b/src/components/settings/WindowSettings.tsx
index 43c1a0ec58..0888d144f3 100644
--- a/src/components/settings/WindowSettings.tsx
+++ b/src/components/settings/WindowSettings.tsx
@@ -22,7 +22,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
 
       <div className="space-y-3">
         <ToggleRow
-          icon={<Power className="h-4 w-4 text-orange-500" />}
+          icon={<Power className="h-4 w-4 text-primary" />}
           title={t("settings.launchOnStartup")}
           description={t("settings.launchOnStartupDescription")}
           checked={!!settings.launchOnStartup}
@@ -39,7 +39,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
               transition={{ duration: 0.3 }}
             >
               <ToggleRow
-                icon={<EyeOff className="h-4 w-4 text-green-500" />}
+                icon={<EyeOff className="h-4 w-4 text-accent-foreground" />}
                 title={t("settings.silentStartup")}
                 description={t("settings.silentStartupDescription")}
                 checked={!!settings.silentStartup}
@@ -50,7 +50,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
         </AnimatePresence>
 
         <ToggleRow
-          icon={<MonitorUp className="h-4 w-4 text-purple-500" />}
+          icon={<MonitorUp className="h-4 w-4 text-primary" />}
           title={t("settings.enableClaudePluginIntegration")}
           description={t("settings.enableClaudePluginIntegrationDescription")}
           checked={!!settings.enableClaudePluginIntegration}
@@ -60,7 +60,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
         />
 
         <ToggleRow
-          icon={<MonitorUp className="h-4 w-4 text-cyan-500" />}
+          icon={<MonitorUp className="h-4 w-4 text-accent-foreground" />}
           title={t("settings.skipClaudeOnboarding")}
           description={t("settings.skipClaudeOnboardingDescription")}
           checked={!!settings.skipClaudeOnboarding}
@@ -68,7 +68,7 @@ export function WindowSettings({ settings, onChange }: WindowSettingsProps) {
         />
 
         <ToggleRow
-          icon={<AppWindow className="h-4 w-4 text-blue-500" />}
+          icon={<AppWindow className="h-4 w-4 text-primary" />}
           title={t("settings.minimizeToTray")}
           description={t("settings.minimizeToTrayDescription")}
           checked={settings.minimizeToTrayOnClose}
diff --git a/src/components/skills/RepoManager.tsx b/src/components/skills/RepoManager.tsx
index 69fee8d9fa..56db1d39c6 100644
--- a/src/components/skills/RepoManager.tsx
+++ b/src/components/skills/RepoManager.tsx
@@ -184,7 +184,7 @@ export function RepoManager({
                           type="button"
                           onClick={() => onRemove(repo.owner, repo.name)}
                           title={t("common.delete")}
-                          className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+                          className="hover:bg-destructive/10 hover:text-destructive"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
diff --git a/src/components/skills/RepoManagerPanel.tsx b/src/components/skills/RepoManagerPanel.tsx
index a264d6d2fc..7d1dff1096 100644
--- a/src/components/skills/RepoManagerPanel.tsx
+++ b/src/components/skills/RepoManagerPanel.tsx
@@ -120,7 +120,7 @@ export function RepoManagerPanel({
             />
           </div>
           {error && (
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            <p className="text-sm text-[hsl(var(--destructive))]">{error}</p>
           )}
           <Button
             onClick={handleAdd}
@@ -171,7 +171,7 @@ export function RepoManagerPanel({
                     type="button"
                     onClick={() => handleOpenRepo(repo.owner, repo.name)}
                     title={t("common.view", { defaultValue: "查看" })}
-                    className="hover:bg-black/5 dark:hover:bg-white/5"
+                    className="hover:bg-accent/60"
                   >
                     <ExternalLink className="h-4 w-4" />
                   </Button>
@@ -181,7 +181,7 @@ export function RepoManagerPanel({
                     type="button"
                     onClick={() => onRemove(repo.owner, repo.name)}
                     title={t("common.delete")}
-                    className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+                    className="hover:bg-destructive/10 hover:text-destructive"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
diff --git a/src/components/skills/SkillCard.tsx b/src/components/skills/SkillCard.tsx
index 2b47c40cad..74cd49c4d3 100644
--- a/src/components/skills/SkillCard.tsx
+++ b/src/components/skills/SkillCard.tsx
@@ -101,7 +101,7 @@ export function SkillCard({
           {skill.installed && (
             <Badge
               variant="default"
-              className="shrink-0 bg-green-600/90 hover:bg-green-600 dark:bg-green-700/90 dark:hover:bg-green-700 text-white border-0"
+              className="shrink-0 border-0 bg-primary text-primary-foreground hover:bg-primary/90"
             >
               {t("skills.installed")}
             </Badge>
@@ -136,7 +136,7 @@ export function SkillCard({
             size="sm"
             onClick={handleUninstall}
             disabled={loading}
-            className="flex-1 border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 dark:border-red-900/50 dark:text-red-400 dark:hover:bg-red-950/50 dark:hover:text-red-300"
+            className="flex-1 border-[hsl(var(--destructive)/0.24)] text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.08)] hover:text-[hsl(var(--destructive))]"
           >
             {loading ? (
               <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
diff --git a/src/components/skills/UnifiedSkillsPanel.tsx b/src/components/skills/UnifiedSkillsPanel.tsx
index 701af49292..4f4b5fee47 100644
--- a/src/components/skills/UnifiedSkillsPanel.tsx
+++ b/src/components/skills/UnifiedSkillsPanel.tsx
@@ -9,6 +9,7 @@ import {
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import {
   type ImportSkillSelection,
@@ -574,7 +575,7 @@ const InstalledSkillListItem: React.FC<InstalledSkillListItemProps> = ({
           type="button"
           variant="ghost"
           size="icon"
-          className="h-7 w-7 hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
+          className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
           onClick={onUninstall}
           title={t("skills.uninstall")}
         >
@@ -781,10 +782,9 @@ const ImportSkillsDialog: React.FC<ImportSkillsDialogProps> = ({
                 key={skill.directory}
                 className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted"
               >
-                <input
-                  type="checkbox"
+                <Checkbox
                   checked={selected.has(skill.directory)}
-                  onChange={() => toggleSelect(skill.directory)}
+                  onCheckedChange={() => toggleSelect(skill.directory)}
                   className="mt-1"
                 />
                 <div className="flex-1 min-w-0">
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
index f730241e55..51059da6b2 100644
--- a/src/components/theme-provider.tsx
+++ b/src/components/theme-provider.tsx
@@ -6,29 +6,143 @@ import React, {
   useState,
 } from "react";
 import { invoke } from "@tauri-apps/api/core";
+import {
+  CUSTOM_THEME_TOKENS,
+  CUSTOM_THEME_VARIABLES,
+  DEFAULT_CUSTOM_THEME,
+  DEFAULT_THEME_PRESET,
+  type CustomThemeConfig,
+  type CustomThemeMode,
+  type CustomThemePalette,
+  type CustomThemeToken,
+  type ThemePreset,
+  deriveChartPalette,
+  deriveStatusPalette,
+  hexToHslString,
+  isHexColor,
+  normalizeHex,
+  syncDerivedDarkPalette,
+} from "@/lib/theme/customTheme";
 
 type Theme = "light" | "dark" | "system";
 
+function parseStoredCustomTheme(
+  value: string | null,
+): CustomThemeConfig | null {
+  if (!value) return null;
+
+  try {
+    const parsed = JSON.parse(value) as Partial<CustomThemeConfig>;
+    const light = { ...DEFAULT_CUSTOM_THEME.light };
+
+    if (parsed.light) {
+      for (const token of CUSTOM_THEME_TOKENS) {
+        const candidate = parsed.light[token];
+        if (
+          typeof candidate === "string" &&
+          isHexColor(normalizeHex(candidate))
+        ) {
+          light[token] = normalizeHex(candidate);
+        }
+      }
+    }
+
+    const restored = syncDerivedDarkPalette({
+      light,
+      dark: DEFAULT_CUSTOM_THEME.dark,
+    });
+
+    if (!parsed.dark) {
+      return restored;
+    }
+
+    const dark = { ...restored.dark };
+    let hasExplicitDarkOverrides = false;
+
+    for (const token of CUSTOM_THEME_TOKENS) {
+      const candidate = parsed.dark[token];
+      if (
+        typeof candidate === "string" &&
+        isHexColor(normalizeHex(candidate))
+      ) {
+        dark[token] = normalizeHex(candidate);
+        hasExplicitDarkOverrides = true;
+      }
+    }
+
+    return hasExplicitDarkOverrides
+      ? {
+          light: restored.light,
+          dark,
+        }
+      : restored;
+  } catch {
+    return null;
+  }
+}
+
 interface ThemeProviderProps {
   children: React.ReactNode;
   defaultTheme?: Theme;
   storageKey?: string;
+  presetStorageKey?: string;
+  customThemeStorageKey?: string;
 }
 
 interface ThemeContextValue {
   theme: Theme;
+  themePreset: ThemePreset;
+  customTheme: CustomThemeConfig;
   setTheme: (theme: Theme, event?: React.MouseEvent) => void;
+  setThemePreset: (preset: ThemePreset) => void;
+  setCustomThemeColor: (
+    mode: CustomThemeMode,
+    token: CustomThemeToken,
+    color: string,
+  ) => void;
+  setCustomThemeColors: (
+    mode: CustomThemeMode,
+    colors: Partial<CustomThemePalette>,
+  ) => void;
+  resetCustomTheme: (mode?: CustomThemeMode) => void;
 }
 
 const ThemeProviderContext = createContext<ThemeContextValue | undefined>(
   undefined,
 );
 
+function getSystemThemeMode(): CustomThemeMode {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return "light";
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "cc-switch-theme",
+  presetStorageKey = "cc-switch-theme-preset",
+  customThemeStorageKey = "cc-switch-theme-custom",
 }: ThemeProviderProps) {
+  const syncLightPalette = (
+    current: CustomThemeConfig,
+    nextLight: CustomThemePalette,
+  ) =>
+    syncDerivedDarkPalette(
+      {
+        ...current,
+        light: nextLight,
+      },
+      {
+        preserveDarkOverrides: true,
+        sourceConfig: current,
+      },
+    );
+
   const getInitialTheme = () => {
     if (typeof window === "undefined") {
       return defaultTheme;
@@ -43,6 +157,39 @@ export function ThemeProvider({
   };
 
   const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+  const getInitialThemePreset = () => {
+    if (typeof window === "undefined") {
+      return DEFAULT_THEME_PRESET;
+    }
+
+    const stored = window.localStorage.getItem(
+      presetStorageKey,
+    ) as ThemePreset | null;
+    if (stored === "default" || stored === "bubblegum" || stored === "custom") {
+      return stored;
+    }
+
+    return DEFAULT_THEME_PRESET;
+  };
+
+  const [themePreset, setThemePresetState] = useState<ThemePreset>(
+    getInitialThemePreset,
+  );
+  const [customTheme, setCustomThemeState] = useState<CustomThemeConfig>(() => {
+    if (typeof window === "undefined") {
+      return DEFAULT_CUSTOM_THEME;
+    }
+
+    return (
+      parseStoredCustomTheme(
+        window.localStorage.getItem(customThemeStorageKey),
+      ) ?? DEFAULT_CUSTOM_THEME
+    );
+  });
+  const [systemThemeMode, setSystemThemeMode] =
+    useState<CustomThemeMode>(getSystemThemeMode);
+  const resolvedThemeMode: CustomThemeMode =
+    theme === "system" ? systemThemeMode : theme;
 
   useEffect(() => {
     if (typeof window === "undefined") {
@@ -57,43 +204,124 @@ export function ThemeProvider({
       return;
     }
 
-    const root = window.document.documentElement;
-    root.classList.remove("light", "dark");
+    window.localStorage.setItem(presetStorageKey, themePreset);
+  }, [themePreset, presetStorageKey]);
 
-    if (theme === "system") {
-      const isDark =
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches;
-      root.classList.add(isDark ? "dark" : "light");
+  useEffect(() => {
+    if (typeof window === "undefined") {
       return;
     }
 
-    root.classList.add(theme);
-  }, [theme]);
+    window.localStorage.setItem(
+      customThemeStorageKey,
+      JSON.stringify(customTheme),
+    );
+  }, [customTheme, customThemeStorageKey]);
 
   useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
 
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (theme !== "system") {
-        return;
-      }
+    window.document.documentElement.dataset.themePreset = themePreset;
+  }, [themePreset]);
 
-      const root = window.document.documentElement;
-      root.classList.toggle("dark", mediaQuery.matches);
-      root.classList.toggle("light", !mediaQuery.matches);
-    };
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
 
-    if (theme === "system") {
-      handleChange();
+    const root = window.document.documentElement;
+
+    for (const variable of CUSTOM_THEME_VARIABLES) {
+      root.style.removeProperty(variable);
     }
 
+    if (themePreset !== "custom") {
+      return;
+    }
+
+    const palette =
+      resolvedThemeMode === "dark" ? customTheme.dark : customTheme.light;
+    const chartPalette = deriveChartPalette(palette, resolvedThemeMode);
+    const statusPalette = deriveStatusPalette(palette, resolvedThemeMode);
+    root.style.setProperty("--background", hexToHslString(palette.background));
+    root.style.setProperty("--foreground", hexToHslString(palette.foreground));
+    root.style.setProperty("--card", hexToHslString(palette.card));
+    root.style.setProperty(
+      "--card-foreground",
+      hexToHslString(palette.cardForeground),
+    );
+    root.style.setProperty("--popover", hexToHslString(palette.popover));
+    root.style.setProperty(
+      "--popover-foreground",
+      hexToHslString(palette.popoverForeground),
+    );
+    root.style.setProperty("--primary", hexToHslString(palette.primary));
+    root.style.setProperty(
+      "--primary-foreground",
+      hexToHslString(palette.primaryForeground),
+    );
+    root.style.setProperty("--secondary", hexToHslString(palette.secondary));
+    root.style.setProperty(
+      "--secondary-foreground",
+      hexToHslString(palette.secondaryForeground),
+    );
+    root.style.setProperty("--muted", hexToHslString(palette.muted));
+    root.style.setProperty(
+      "--muted-foreground",
+      hexToHslString(palette.mutedForeground),
+    );
+    root.style.setProperty("--accent", hexToHslString(palette.accent));
+    root.style.setProperty(
+      "--accent-foreground",
+      hexToHslString(palette.accentForeground),
+    );
+    root.style.setProperty(
+      "--destructive",
+      hexToHslString(palette.destructive),
+    );
+    root.style.setProperty(
+      "--destructive-foreground",
+      hexToHslString(palette.destructiveForeground),
+    );
+    root.style.setProperty("--success", hexToHslString(statusPalette.success));
+    root.style.setProperty("--info", hexToHslString(palette.info));
+    root.style.setProperty("--warning", hexToHslString(statusPalette.warning));
+    root.style.setProperty("--error", hexToHslString(palette.error));
+    root.style.setProperty("--border", hexToHslString(palette.border));
+    root.style.setProperty("--input", hexToHslString(palette.input));
+    root.style.setProperty("--ring", hexToHslString(palette.ring));
+    root.style.setProperty("--chart-1", hexToHslString(chartPalette.chart1));
+    root.style.setProperty("--chart-2", hexToHslString(chartPalette.chart2));
+    root.style.setProperty("--chart-3", hexToHslString(chartPalette.chart3));
+    root.style.setProperty("--chart-4", hexToHslString(chartPalette.chart4));
+    root.style.setProperty("--chart-5", hexToHslString(chartPalette.chart5));
+  }, [customTheme, resolvedThemeMode, themePreset]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolvedThemeMode);
+  }, [resolvedThemeMode]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () =>
+      setSystemThemeMode(mediaQuery.matches ? "dark" : "light");
+
+    handleChange();
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme]);
+  }, []);
 
   // Sync native window theme (Windows/macOS title bar)
   useEffect(() => {
@@ -130,6 +358,8 @@ export function ThemeProvider({
   const value = useMemo<ThemeContextValue>(
     () => ({
       theme,
+      themePreset,
+      customTheme,
       setTheme: (nextTheme: Theme, event?: React.MouseEvent) => {
         // Skip if same theme
         if (nextTheme === theme) return;
@@ -155,8 +385,77 @@ export function ThemeProvider({
           setThemeState(nextTheme);
         }
       },
+      setThemePreset: (nextPreset: ThemePreset) => {
+        if (nextPreset === themePreset) return;
+        setThemePresetState(nextPreset);
+      },
+      setCustomThemeColor: (
+        mode: CustomThemeMode,
+        token: CustomThemeToken,
+        color: string,
+      ) => {
+        const normalized = normalizeHex(color);
+        if (!isHexColor(normalized)) return;
+
+        setCustomThemeState((current) => {
+          const nextPalette = {
+            ...current[mode],
+            [token]: normalized,
+          };
+
+          return mode === "light"
+            ? syncLightPalette(current, nextPalette)
+            : {
+                ...current,
+                [mode]: nextPalette,
+              };
+        });
+      },
+      setCustomThemeColors: (
+        mode: CustomThemeMode,
+        colors: Partial<CustomThemePalette>,
+      ) => {
+        const entries = Object.entries(colors).filter(
+          ([, value]) =>
+            typeof value === "string" && isHexColor(normalizeHex(value)),
+        ) as Array<[CustomThemeToken, string]>;
+
+        if (entries.length === 0) return;
+
+        setCustomThemeState((current) => {
+          const nextPalette = {
+            ...current[mode],
+            ...Object.fromEntries(
+              entries.map(([token, value]) => [token, normalizeHex(value)]),
+            ),
+          };
+
+          return mode === "light"
+            ? syncLightPalette(current, nextPalette)
+            : {
+                ...current,
+                [mode]: nextPalette,
+              };
+        });
+      },
+      resetCustomTheme: (mode?: CustomThemeMode) => {
+        setCustomThemeState((current) => {
+          if (!mode) {
+            return DEFAULT_CUSTOM_THEME;
+          }
+
+          if (mode === "light") {
+            return syncLightPalette(current, DEFAULT_CUSTOM_THEME.light);
+          }
+
+          return {
+            ...current,
+            [mode]: DEFAULT_CUSTOM_THEME[mode],
+          };
+        });
+      },
     }),
-    [theme],
+    [customTheme, theme, themePreset],
   );
 
   return (
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 415ecd5e3b..ef79dae0ad 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -8,25 +8,23 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        // 主按钮：蓝底白字（对应旧版 primary）
-        default:
-          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        // 主按钮：跟随主题主色
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         // 危险按钮：红底白字（对应旧版 danger）
         destructive:
-          "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         // 轮廓按钮
         outline:
-          "border border-border-default bg-background text-muted-foreground hover:bg-gray-100 hover:text-gray-900 hover:border-border-hover dark:hover:bg-gray-800 dark:hover:text-gray-100",
-        // 次按钮：灰色（对应旧版 secondary）
+          "border border-border-default bg-background text-foreground hover:bg-accent hover:text-accent-foreground hover:border-border-hover",
+        // 次按钮：跟随 secondary token
         secondary:
-          "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         // 幽灵按钮（对应旧版 ghost）
-        ghost:
-          "text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800",
-        // MCP 专属按钮：祖母绿
-        mcp: "bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700",
+        ghost: "text-muted-foreground hover:text-foreground hover:bg-accent",
+        // MCP 专属按钮：跟随 accent token，避免写死绿色
+        mcp: "bg-accent text-accent-foreground hover:bg-accent/80",
         // 链接按钮
-        link: "text-blue-500 underline-offset-4 hover:underline dark:text-blue-400",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 98c583d826..1f23475bf7 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-border-default bg-background text-foreground px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-border-default bg-background text-foreground px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 9cd7cc1c37..bbe9ee8c00 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { Toaster as SonnerToaster } from "sonner";
 import { useTheme } from "@/components/theme-provider";
 
@@ -7,12 +8,32 @@ export function Toaster() {
   // 将应用主题映射到 Sonner 的主题
   // 如果是 "system"，Sonner 会自己处理
   const sonnerTheme = theme === "system" ? "system" : theme;
+  const toastThemeVars = {
+    "--normal-bg": "hsl(var(--background))",
+    "--normal-bg-hover": "hsl(var(--muted))",
+    "--normal-border": "hsl(var(--border))",
+    "--normal-border-hover": "hsl(var(--border) / 0.9)",
+    "--normal-text": "hsl(var(--foreground))",
+    "--success-bg": "hsl(var(--success) / 0.12)",
+    "--success-border": "hsl(var(--success) / 0.24)",
+    "--success-text": "hsl(var(--success))",
+    "--info-bg": "hsl(var(--info) / 0.12)",
+    "--info-border": "hsl(var(--info) / 0.24)",
+    "--info-text": "hsl(var(--info))",
+    "--warning-bg": "hsl(var(--warning) / 0.12)",
+    "--warning-border": "hsl(var(--warning) / 0.24)",
+    "--warning-text": "hsl(var(--warning))",
+    "--error-bg": "hsl(var(--error) / 0.12)",
+    "--error-border": "hsl(var(--error) / 0.24)",
+    "--error-text": "hsl(var(--error))",
+  } as CSSProperties;
 
   return (
     <SonnerToaster
       position="top-center"
       richColors
       theme={sonnerTheme}
+      style={toastThemeVars}
       toastOptions={{
         duration: 2000,
         classNames: {
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index f66c1328f0..61128ed57a 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -9,14 +9,14 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     ref={ref}
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-emerald-500 dark:data-[state=checked]:bg-emerald-600 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-900",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className,
     )}
     {...props}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-white dark:bg-gray-400 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 12d7c97016..6c445e0f65 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-blue-500 data-[state=active]:text-white data-[state=active]:shadow-sm dark:data-[state=active]:bg-blue-600 data-[state=inactive]:opacity-60 data-[state=inactive]:hover:opacity-100 data-[state=inactive]:hover:bg-muted/50",
+      "inline-flex min-w-[120px] items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm data-[state=inactive]:opacity-60 data-[state=inactive]:hover:opacity-100 data-[state=inactive]:hover:bg-muted/50",
       className,
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index e7041b1267..d077c08093 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         autoComplete="off"
diff --git a/src/components/usage/ModelStatsTable.tsx b/src/components/usage/ModelStatsTable.tsx
index 9f629d70b3..1ce25cc0dd 100644
--- a/src/components/usage/ModelStatsTable.tsx
+++ b/src/components/usage/ModelStatsTable.tsx
@@ -25,7 +25,7 @@ export function ModelStatsTable({
   });
 
   if (isLoading) {
-    return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
+    return <div className="h-[400px] animate-pulse rounded-lg bg-muted/60" />;
   }
 
   return (
diff --git a/src/components/usage/ProviderStatsTable.tsx b/src/components/usage/ProviderStatsTable.tsx
index 993a436ba2..bc72472d4b 100644
--- a/src/components/usage/ProviderStatsTable.tsx
+++ b/src/components/usage/ProviderStatsTable.tsx
@@ -25,7 +25,7 @@ export function ProviderStatsTable({
   });
 
   if (isLoading) {
-    return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
+    return <div className="h-[400px] animate-pulse rounded-lg bg-muted/60" />;
   }
 
   return (
diff --git a/src/components/usage/RequestDetailPanel.tsx b/src/components/usage/RequestDetailPanel.tsx
index 4b9b191c38..346c7bf06d 100644
--- a/src/components/usage/RequestDetailPanel.tsx
+++ b/src/components/usage/RequestDetailPanel.tsx
@@ -29,7 +29,7 @@ export function RequestDetailPanel({
     return (
       <Dialog open onOpenChange={onClose}>
         <DialogContent className="max-w-2xl">
-          <div className="h-[400px] animate-pulse rounded bg-gray-100" />
+          <div className="h-[400px] animate-pulse rounded-lg bg-muted/60" />
         </DialogContent>
       </Dialog>
     );
@@ -111,10 +111,10 @@ export function RequestDetailPanel({
                 </dt>
                 <dd>
                   <span
-                    className={`inline-flex rounded-full px-2 py-1 text-xs ${
+                    className={`inline-flex rounded-full border px-2 py-1 text-xs ${
                       request.statusCode >= 200 && request.statusCode < 300
-                        ? "bg-green-100 text-green-800"
-                        : "bg-red-100 text-red-800"
+                        ? "border-primary/20 bg-primary/10 text-primary"
+                        : "border-destructive/20 bg-destructive/10 text-destructive"
                     }`}
                   >
                     {request.statusCode}
@@ -271,11 +271,13 @@ export function RequestDetailPanel({
 
           {/* 错误信息 */}
           {request.errorMessage && (
-            <div className="rounded-lg border border-red-200 bg-red-50 p-4">
-              <h3 className="mb-2 font-semibold text-red-800">
+            <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-4">
+              <h3 className="mb-2 font-semibold text-destructive">
                 {t("usage.errorMessage", "错误信息")}
               </h3>
-              <p className="text-sm text-red-700">{request.errorMessage}</p>
+              <p className="text-sm text-destructive/90">
+                {request.errorMessage}
+              </p>
             </div>
           )}
         </div>
diff --git a/src/components/usage/RequestLogTable.tsx b/src/components/usage/RequestLogTable.tsx
index fe485ec209..535d03f445 100644
--- a/src/components/usage/RequestLogTable.tsx
+++ b/src/components/usage/RequestLogTable.tsx
@@ -341,12 +341,14 @@ export function RequestLogTable({
         </div>
 
         {validationError && (
-          <div className="text-sm text-red-600">{validationError}</div>
+          <div className="text-sm text-[hsl(var(--destructive))]">
+            {validationError}
+          </div>
         )}
       </div>
 
       {isLoading ? (
-        <div className="h-[400px] animate-pulse rounded bg-gray-100" />
+        <div className="h-[400px] animate-pulse rounded-lg bg-muted/60" />
       ) : (
         <>
           <div className="rounded-lg border border-border/50 bg-card/40 backdrop-blur-sm overflow-x-auto">
@@ -444,7 +446,7 @@ export function RequestLogTable({
                       </TableCell>
                       <TableCell className="text-right font-mono text-xs">
                         {(parseFiniteNumber(log.costMultiplier) ?? 1) !== 1 ? (
-                          <span className="text-orange-600">
+                          <span className="text-[hsl(var(--warning))]">
                             ×{log.costMultiplier}
                           </span>
                         ) : (
@@ -464,11 +466,11 @@ export function RequestLogTable({
                             const durationSec = durationMs / 1000;
                             const durationColor = Number.isFinite(durationSec)
                               ? durationSec <= 5
-                                ? "bg-green-100 text-green-800"
+                                ? "border border-primary/20 bg-primary/10 text-primary"
                                 : durationSec <= 120
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-red-200 text-red-900"
-                              : "bg-gray-100 text-gray-700";
+                                  ? "border border-accent/40 bg-accent/20 text-accent-foreground"
+                                  : "border border-destructive/20 bg-destructive/10 text-destructive"
+                              : "border border-border/70 bg-muted/60 text-muted-foreground";
                             return (
                               <span
                                 className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${durationColor}`}
@@ -485,11 +487,11 @@ export function RequestLogTable({
                               const firstSec = log.firstTokenMs / 1000;
                               const firstColor = Number.isFinite(firstSec)
                                 ? firstSec <= 5
-                                  ? "bg-green-100 text-green-800"
+                                  ? "border border-primary/20 bg-primary/10 text-primary"
                                   : firstSec <= 120
-                                    ? "bg-orange-100 text-orange-800"
-                                    : "bg-red-200 text-red-900"
-                                : "bg-gray-100 text-gray-700";
+                                    ? "border border-accent/40 bg-accent/20 text-accent-foreground"
+                                    : "border border-destructive/20 bg-destructive/10 text-destructive"
+                                : "border border-border/70 bg-muted/60 text-muted-foreground";
                               return (
                                 <span
                                   className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${firstColor}`}
@@ -503,8 +505,8 @@ export function RequestLogTable({
                           <span
                             className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${
                               log.isStreaming
-                                ? "bg-blue-100 text-blue-800"
-                                : "bg-purple-100 text-purple-800"
+                                ? "border border-primary/20 bg-primary/10 text-primary"
+                                : "border border-secondary/70 bg-secondary text-secondary-foreground"
                             }`}
                           >
                             {log.isStreaming
@@ -515,10 +517,10 @@ export function RequestLogTable({
                       </TableCell>
                       <TableCell>
                         <span
-                          className={`inline-flex rounded-full px-2 py-1 text-xs ${
+                          className={`inline-flex rounded-full border px-2 py-1 text-xs ${
                             log.statusCode >= 200 && log.statusCode < 300
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
+                              ? "border-primary/20 bg-primary/10 text-primary"
+                              : "border-destructive/20 bg-destructive/10 text-destructive"
                           }`}
                         >
                           {log.statusCode}
diff --git a/src/components/usage/UsageDashboard.tsx b/src/components/usage/UsageDashboard.tsx
index d0ad19a7e3..6753689d05 100644
--- a/src/components/usage/UsageDashboard.tsx
+++ b/src/components/usage/UsageDashboard.tsx
@@ -216,7 +216,10 @@ export function UsageDashboard() {
         >
           <AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-muted/50 data-[state=open]:bg-muted/50">
             <div className="flex items-center gap-3">
-              <Coins className="h-5 w-5 text-yellow-500" />
+              <Coins
+                className="h-5 w-5"
+                style={{ color: "hsl(var(--warning))" }}
+              />
               <div className="text-left">
                 <h3 className="text-base font-semibold">
                   {t("settings.advanced.pricing.title")}
diff --git a/src/components/usage/UsageSummaryCards.tsx b/src/components/usage/UsageSummaryCards.tsx
index 1e7d58f608..77281b4991 100644
--- a/src/components/usage/UsageSummaryCards.tsx
+++ b/src/components/usage/UsageSummaryCards.tsx
@@ -12,6 +12,25 @@ interface UsageSummaryCardsProps {
   refreshIntervalMs: number;
 }
 
+const TONE_STYLES = {
+  requests: {
+    color: "hsl(var(--chart-1))",
+    backgroundColor: "hsl(var(--chart-1) / 0.14)",
+  },
+  cost: {
+    color: "hsl(var(--chart-5))",
+    backgroundColor: "hsl(var(--chart-5) / 0.14)",
+  },
+  tokens: {
+    color: "hsl(var(--chart-4))",
+    backgroundColor: "hsl(var(--chart-4) / 0.14)",
+  },
+  cache: {
+    color: "hsl(var(--chart-3))",
+    backgroundColor: "hsl(var(--chart-3) / 0.14)",
+  },
+} as const;
+
 export function UsageSummaryCards({
   days,
   appType,
@@ -40,24 +59,21 @@ export function UsageSummaryCards({
         title: t("usage.totalRequests"),
         value: totalRequests.toLocaleString(),
         icon: Activity,
-        color: "text-blue-500",
-        bg: "bg-blue-500/10",
+        tone: TONE_STYLES.requests,
         subValue: null,
       },
       {
         title: t("usage.totalCost"),
         value: totalCost == null ? "--" : fmtUsd(totalCost, 4),
         icon: DollarSign,
-        color: "text-green-500",
-        bg: "bg-green-500/10",
+        tone: TONE_STYLES.cost,
         subValue: null,
       },
       {
         title: t("usage.totalTokens"),
         value: totalTokens.toLocaleString(),
         icon: Layers,
-        color: "text-purple-500",
-        bg: "bg-purple-500/10",
+        tone: TONE_STYLES.tokens,
         subValue: (
           <div className="flex flex-col gap-1 text-xs text-muted-foreground mt-3 pt-3 border-t border-border/50">
             <div className="flex justify-between items-center">
@@ -79,8 +95,7 @@ export function UsageSummaryCards({
         title: t("usage.cacheTokens"),
         value: totalCacheTokens.toLocaleString(),
         icon: Database,
-        color: "text-orange-500",
-        bg: "bg-orange-500/10",
+        tone: TONE_STYLES.cache,
         subValue: (
           <div className="flex flex-col gap-1 text-xs text-muted-foreground mt-3 pt-3 border-t border-border/50">
             <div className="flex justify-between items-center">
@@ -148,8 +163,11 @@ export function UsageSummaryCards({
                 <p className="text-sm font-medium text-muted-foreground">
                   {stat.title}
                 </p>
-                <div className={`p-2 rounded-lg ${stat.bg}`}>
-                  <stat.icon className={`h-4 w-4 ${stat.color}`} />
+                <div className="rounded-lg p-2" style={stat.tone}>
+                  <stat.icon
+                    className="h-4 w-4"
+                    style={{ color: stat.tone.color }}
+                  />
                 </div>
               </div>
 
diff --git a/src/components/usage/UsageTrendChart.tsx b/src/components/usage/UsageTrendChart.tsx
index 7344c62b70..7f9f620e59 100644
--- a/src/components/usage/UsageTrendChart.tsx
+++ b/src/components/usage/UsageTrendChart.tsx
@@ -72,6 +72,13 @@ export function UsageTrendChart({
     }) || [];
 
   const displayData = chartData;
+  const chartColors = {
+    input: "hsl(var(--chart-1))",
+    output: "hsl(var(--chart-2))",
+    cacheCreation: "hsl(var(--chart-3))",
+    cacheRead: "hsl(var(--chart-4))",
+    cost: "hsl(var(--chart-5))",
+  } as const;
 
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
@@ -125,12 +132,28 @@ export function UsageTrendChart({
           >
             <defs>
               <linearGradient id="colorInput" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2} />
-                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                <stop
+                  offset="5%"
+                  stopColor={chartColors.input}
+                  stopOpacity={0.2}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={chartColors.input}
+                  stopOpacity={0}
+                />
               </linearGradient>
               <linearGradient id="colorOutput" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#22c55e" stopOpacity={0.2} />
-                <stop offset="95%" stopColor="#22c55e" stopOpacity={0} />
+                <stop
+                  offset="5%"
+                  stopColor={chartColors.output}
+                  stopOpacity={0.2}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={chartColors.output}
+                  stopOpacity={0}
+                />
               </linearGradient>
               <linearGradient
                 id="colorCacheCreation"
@@ -139,12 +162,28 @@ export function UsageTrendChart({
                 x2="0"
                 y2="1"
               >
-                <stop offset="5%" stopColor="#f97316" stopOpacity={0.2} />
-                <stop offset="95%" stopColor="#f97316" stopOpacity={0} />
+                <stop
+                  offset="5%"
+                  stopColor={chartColors.cacheCreation}
+                  stopOpacity={0.2}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={chartColors.cacheCreation}
+                  stopOpacity={0}
+                />
               </linearGradient>
               <linearGradient id="colorCacheRead" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="5%" stopColor="#a855f7" stopOpacity={0.2} />
-                <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
+                <stop
+                  offset="5%"
+                  stopColor={chartColors.cacheRead}
+                  stopOpacity={0.2}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={chartColors.cacheRead}
+                  stopOpacity={0}
+                />
               </linearGradient>
             </defs>
             <CartesianGrid
@@ -182,7 +221,7 @@ export function UsageTrendChart({
               type="monotone"
               dataKey="inputTokens"
               name={t("usage.inputTokens", "输入 Tokens")}
-              stroke="#3b82f6"
+              stroke={chartColors.input}
               fillOpacity={1}
               fill="url(#colorInput)"
               strokeWidth={2}
@@ -192,7 +231,7 @@ export function UsageTrendChart({
               type="monotone"
               dataKey="outputTokens"
               name={t("usage.outputTokens", "输出 Tokens")}
-              stroke="#22c55e"
+              stroke={chartColors.output}
               fillOpacity={1}
               fill="url(#colorOutput)"
               strokeWidth={2}
@@ -202,7 +241,7 @@ export function UsageTrendChart({
               type="monotone"
               dataKey="cacheCreationTokens"
               name={t("usage.cacheCreationTokens", "缓存创建")}
-              stroke="#f97316"
+              stroke={chartColors.cacheCreation}
               fillOpacity={1}
               fill="url(#colorCacheCreation)"
               strokeWidth={2}
@@ -212,7 +251,7 @@ export function UsageTrendChart({
               type="monotone"
               dataKey="cacheReadTokens"
               name={t("usage.cacheReadTokens", "缓存命中")}
-              stroke="#a855f7"
+              stroke={chartColors.cacheRead}
               fillOpacity={1}
               fill="url(#colorCacheRead)"
               strokeWidth={2}
@@ -222,7 +261,7 @@ export function UsageTrendChart({
               type="monotone"
               dataKey="cost"
               name={t("usage.cost", "成本")}
-              stroke="#f43f5e"
+              stroke={chartColors.cost}
               fill="none"
               strokeWidth={2}
               strokeDasharray="4 4"
diff --git a/src/components/workspace/WorkspaceFilesPanel.tsx b/src/components/workspace/WorkspaceFilesPanel.tsx
index adf9c79274..e801f138ff 100644
--- a/src/components/workspace/WorkspaceFilesPanel.tsx
+++ b/src/components/workspace/WorkspaceFilesPanel.tsx
@@ -113,7 +113,10 @@ const WorkspaceFilesPanel: React.FC = () => {
                     {file.filename}
                   </span>
                   {exists ? (
-                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500 flex-shrink-0" />
+                    <CheckCircle2
+                      className="w-3.5 h-3.5 flex-shrink-0"
+                      style={{ color: "hsl(var(--success))" }}
+                    />
                   ) : (
                     <Circle className="w-3.5 h-3.5 text-muted-foreground/40 flex-shrink-0" />
                   )}
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b28e876c1e..5bc4ab6b77 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -256,7 +256,9 @@
       "description": "Use your other subscriptions in Claude Code — please be mindful of compliance risks.",
       "beta": "Beta",
       "copilotDescription": "Manage GitHub Copilot accounts",
-      "codexOauthDescription": "Manage ChatGPT accounts"
+      "codexOauthDescription": "Manage ChatGPT accounts",
+      "heading": "Authentication Center",
+      "headingDescription": "Manage reusable OAuth accounts and default authentication sources across apps."
     },
     "advanced": {
       "configDir": {
@@ -353,9 +355,99 @@
     "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.",
+    "themeMode": "Theme mode",
     "themeLight": "Light",
     "themeDark": "Dark",
     "themeSystem": "System",
+    "themePreset": "Theme preset",
+    "themePresetHint": "Switch the overall color and corner style of the interface so more theme systems can plug in later.",
+    "themePresetDefault": "Default",
+    "themePresetDefaultDescription": "Keeps the current clean, system-like visual language.",
+    "themePresetBubblegum": "Bubble Gum",
+    "themePresetBubblegumDescription": "A softer, brighter candy palette to make preset changes more obvious.",
+    "themePresetCustom": "Custom",
+    "themePresetCustomDescription": "Adjust colors directly in settings and build your own theme preset.",
+    "themeCustomPalette": "Custom palette",
+    "themeCustomPaletteHint": "Custom keeps one base palette, and dark mode is derived automatically on top of it.",
+    "themeCustomPaletteHintCollapsed": "Preview follows {{mode}}. Custom only maintains one base palette, and dark mode is derived automatically.",
+    "themeCustomPaletteHintSingle": "You edit the base custom palette here. When the app switches to dark mode, a dark variant is generated automatically.",
+    "themeCustomPaletteHintAdvanced": "Custom keeps one base palette, and the dark variant is derived automatically.",
+    "themePaletteLight": "Light palette",
+    "themePaletteDark": "Dark palette",
+    "themeCustomPaletteTip": "Start with primary, accent, and background, then fine-tune border and ring.",
+    "themeCustomPaletteResetBase": "Reset base palette",
+    "themeEditorExpand": "Expand custom options",
+    "themeEditorCollapse": "Collapse custom options",
+    "themeAdvancedEditingShow": "Edit light/dark separately",
+    "themeAdvancedEditingHide": "Use one active palette",
+    "themeEditingBasePalette": "Editing base palette",
+    "themeDarkOverlayBadge": "Dark mode auto-overlay",
+    "themeColorBackground": "Background",
+    "themeColorForeground": "Foreground",
+    "themeColorCard": "Card",
+    "themeColorPrimary": "Primary",
+    "themeColorPrimaryForeground": "Primary text",
+    "themeColorSecondary": "Secondary",
+    "themeColorSecondaryForeground": "Secondary text",
+    "themeColorAccent": "Accent",
+    "themeColorAccentForeground": "Accent text",
+    "themeColorCardForeground": "Card text",
+    "themeColorPopover": "Popover",
+    "themeColorPopoverForeground": "Popover text",
+    "themeColorMuted": "Muted",
+    "themeColorMutedForeground": "Muted text",
+    "themeColorDestructive": "Destructive",
+    "themeColorDestructiveForeground": "Destructive text",
+    "themeColorSuccess": "Success",
+    "themeColorInfo": "Info",
+    "themeColorWarning": "Warning",
+    "themeColorError": "Error",
+    "themeColorBorder": "Border",
+    "themeColorInput": "Input",
+    "themeColorRing": "Focus ring",
+    "themeSectionPrimary": "Primary",
+    "themeSectionSecondary": "Secondary",
+    "themeSectionAccent": "Accent",
+    "themeSectionBase": "Base",
+    "themeSectionCard": "Card",
+    "themeSectionPopover": "Popover",
+    "themeSectionMuted": "Muted",
+    "themeSectionDestructive": "Destructive",
+    "themeSectionSemanticAdvanced": "Semantic (Advanced)",
+    "themeSectionBorderInput": "Border & input",
+    "themeSectionTokens": "tokens",
+    "themeSectionSurface": "Surface",
+    "themeSectionBrand": "Brand & accent",
+    "themeEditorSearchPlaceholder": "Search colors...",
+    "themeEditorNoResults": "No matching colors found.",
+    "themeSyncSection": "Sync section",
+    "themeSyncSectionTooltip": "Automatically fills linked colors in this section, such as foreground, input, or ring.",
+    "themeAutoSync": "Auto-generate linked color",
+    "themeAutoSyncTooltip": "Automatically generates the linked color based on this field's main color.",
+    "themeColorHex": "Hex",
+    "themeColorField": "Color field",
+    "themeColorHue": "Hue",
+    "themeQuickPicks": "Quick picks",
+    "themePreview": "Component preview",
+    "themePreviewHint": "Quickly check whether surfaces, status pills, inputs, and buttons stay readable with the current palette.",
+    "themePreviewCardTitle": "Common UI example",
+    "themePreviewCardDescription": "This bundles the card surface, pills, inputs, and button hierarchy into one compact sample.",
+    "themePreviewStatusLabel": "Status pills",
+    "themePreviewSelected": "Selected",
+    "themePreviewInputLabel": "Input preview",
+    "themePreviewInputDefault": "Default state",
+    "themePreviewInputFocused": "Focused state",
+    "themePreviewInputPlaceholder": "Paste your API key",
+    "themePreviewActionsLabel": "Button hierarchy",
+    "themePreviewActionsHint": "These show primary, secondary, accent, and destructive actions side by side.",
+    "themePreviewToastLabel": "Toast messages",
+    "themePreviewToastHint": "Preview the semantic colors for success, info, warning, and error messages.",
+    "themePreviewToastSuccess": "Success",
+    "themePreviewToastInfo": "Info",
+    "themePreviewToastWarning": "Warning",
+    "themePreviewToastError": "Error",
+    "themePreviewToastBody": "This is a sample toast",
+    "themePreviewAccent": "Accent action",
     "importExport": "SQL Import/Export",
     "importExportHint": "Import or export database SQL backups for migration or restore (import supports only backups exported by CC Switch).",
     "exportConfig": "Export SQL Backup",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index a8ba0cf517..5e4fc25054 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -256,7 +256,9 @@
       "description": "Claude Code で他のサブスクリプションをご利用いただけます。コンプライアンスリスクにご注意ください。",
       "beta": "Beta",
       "copilotDescription": "GitHub Copilot アカウントを管理します",
-      "codexOauthDescription": "ChatGPT アカウントを管理します"
+      "codexOauthDescription": "ChatGPT アカウントを管理します",
+      "heading": "認証センター",
+      "headingDescription": "アプリ間で再利用できる OAuth アカウントと既定の認証ソースをまとめて管理します。"
     },
     "advanced": {
       "configDir": {
@@ -353,9 +355,99 @@
     "languageHint": "切り替えるとすぐにプレビューされ、保存後に永続化されます。",
     "theme": "テーマ",
     "themeHint": "アプリのテーマを選択します。すぐに反映されます。",
+    "themeMode": "テーマモード",
     "themeLight": "ライト",
     "themeDark": "ダーク",
     "themeSystem": "システム",
+    "themePreset": "テーマプリセット",
+    "themePresetHint": "画面全体の配色と角丸の雰囲気を切り替え、今後のテーマ拡張をしやすくします。",
+    "themePresetDefault": "デフォルト",
+    "themePresetDefaultDescription": "現在のクリーンでシステム寄りの見た目を維持します。",
+    "themePresetBubblegum": "キャンディテーマ",
+    "themePresetBubblegumDescription": "より柔らかく明るいキャンディ調の配色で、変化が分かりやすいプリセットです。",
+    "themePresetCustom": "カスタム",
+    "themePresetCustomDescription": "設定画面で色を直接調整して、自分だけのテーマを作成します。",
+    "themeCustomPalette": "カスタムパレット",
+    "themeCustomPaletteHint": "カスタムは 1 つのベース配色だけを持ち、ダークモードはその上に自動で重ねて生成します。",
+    "themeCustomPaletteHintCollapsed": "{{mode}} でプレビューされます。カスタムは 1 つのベース配色だけを持ち、ダークは自動生成されます。",
+    "themeCustomPaletteHintSingle": "ここではカスタムのベース配色だけを編集します。ダークモードに切り替わると、自動でダーク版が生成されます。",
+    "themeCustomPaletteHintAdvanced": "カスタムは 1 つのベース配色だけを持ち、ダーク版は自動生成されます。",
+    "themePaletteLight": "ライトパレット",
+    "themePaletteDark": "ダークパレット",
+    "themeCustomPaletteTip": "まずは primary、accent、background を調整し、その後 border と ring を整えるのがおすすめです。",
+    "themeCustomPaletteResetBase": "ベース配色をリセット",
+    "themeEditorExpand": "カスタム設定を展開",
+    "themeEditorCollapse": "カスタム設定を折りたたむ",
+    "themeAdvancedEditingShow": "ライト/ダークを個別編集",
+    "themeAdvancedEditingHide": "現在のパレットのみ編集",
+    "themeEditingBasePalette": "ベース配色を編集中",
+    "themeDarkOverlayBadge": "ダークは自動オーバーレイ",
+    "themeColorBackground": "背景",
+    "themeColorForeground": "前景色",
+    "themeColorCard": "カード",
+    "themeColorPrimary": "プライマリ",
+    "themeColorPrimaryForeground": "プライマリ文字色",
+    "themeColorSecondary": "セカンダリ",
+    "themeColorSecondaryForeground": "セカンダリ文字色",
+    "themeColorAccent": "アクセント",
+    "themeColorAccentForeground": "アクセント文字色",
+    "themeColorCardForeground": "カード文字色",
+    "themeColorPopover": "ポップオーバー",
+    "themeColorPopoverForeground": "ポップオーバー文字色",
+    "themeColorMuted": "ミュート",
+    "themeColorMutedForeground": "ミュート文字色",
+    "themeColorDestructive": "破壊的",
+    "themeColorDestructiveForeground": "破壊的文字色",
+    "themeColorSuccess": "成功色",
+    "themeColorInfo": "情報色",
+    "themeColorWarning": "警告色",
+    "themeColorError": "エラー色",
+    "themeColorBorder": "ボーダー",
+    "themeColorInput": "入力欄",
+    "themeColorRing": "フォーカスリング",
+    "themeSectionPrimary": "プライマリ",
+    "themeSectionSecondary": "セカンダリ",
+    "themeSectionAccent": "アクセント",
+    "themeSectionBase": "ベース",
+    "themeSectionCard": "カード",
+    "themeSectionPopover": "ポップオーバー",
+    "themeSectionMuted": "ミュート",
+    "themeSectionDestructive": "破壊的",
+    "themeSectionSemanticAdvanced": "意味色（高度）",
+    "themeSectionBorderInput": "ボーダーと入力欄",
+    "themeSectionTokens": "項目",
+    "themeSectionSurface": "サーフェス",
+    "themeSectionBrand": "ブランドとアクセント",
+    "themeEditorSearchPlaceholder": "色を検索...",
+    "themeEditorNoResults": "一致する色項目がありません。",
+    "themeSyncSection": "セクションを同期",
+    "themeSyncSectionTooltip": "このセクションの関連色を自動補完します。前景色、入力欄、フォーカスリングなどが対象です。",
+    "themeAutoSync": "関連色を自動生成",
+    "themeAutoSyncTooltip": "この項目のメインカラーを元に、対応する関連色を自動生成します。",
+    "themeColorHex": "HEX",
+    "themeColorField": "カラーフィールド",
+    "themeColorHue": "色相",
+    "themeQuickPicks": "クイックカラー",
+    "themePreview": "コンポーネントプレビュー",
+    "themePreviewHint": "現在の配色で面の階層、状態ラベル、入力欄、ボタンが読みやすいかを素早く確認できます。",
+    "themePreviewCardTitle": "よく使う UI 例",
+    "themePreviewCardDescription": "カード面、ラベル、入力欄、ボタン階層を 1 つのコンパクトな例で確認します。",
+    "themePreviewStatusLabel": "状態ラベル",
+    "themePreviewSelected": "選択中",
+    "themePreviewInputLabel": "入力欄プレビュー",
+    "themePreviewInputDefault": "通常状態",
+    "themePreviewInputFocused": "フォーカス状態",
+    "themePreviewInputPlaceholder": "API Key を入力",
+    "themePreviewActionsLabel": "ボタン階層",
+    "themePreviewActionsHint": "主ボタン、次ボタン、強調ボタン、危険ボタンを並べて確認できます。",
+    "themePreviewToastLabel": "トースト通知",
+    "themePreviewToastHint": "success、info、warning、error の意味色をまとめて確認できます。",
+    "themePreviewToastSuccess": "成功",
+    "themePreviewToastInfo": "情報",
+    "themePreviewToastWarning": "警告",
+    "themePreviewToastError": "エラー",
+    "themePreviewToastBody": "これはサンプル通知です",
+    "themePreviewAccent": "アクセント操作",
     "importExport": "SQL インポート/エクスポート",
     "importExportHint": "移行や復元用にデータベースの SQL バックアップをインポート/エクスポートします（インポートは CC Switch がエクスポートしたバックアップのみ対応）。",
     "exportConfig": "SQL バックアップをエクスポート",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 421d7f859b..479c45f06d 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -256,7 +256,9 @@
       "description": "在 Claude Code 中使用您的其他订阅，请注意合规风险。",
       "beta": "Beta",
       "copilotDescription": "管理 GitHub Copilot 账号",
-      "codexOauthDescription": "管理 ChatGPT 账号"
+      "codexOauthDescription": "管理 ChatGPT 账号",
+      "heading": "认证中心",
+      "headingDescription": "统一管理可跨应用复用的 OAuth 账号和默认认证来源。"
     },
     "advanced": {
       "configDir": {
@@ -353,9 +355,99 @@
     "languageHint": "切换后立即预览界面语言，保存后永久生效。",
     "theme": "外观主题",
     "themeHint": "选择应用的外观主题，立即生效。",
+    "themeMode": "明暗模式",
     "themeLight": "浅色",
     "themeDark": "深色",
     "themeSystem": "跟随系统",
+    "themePreset": "主题预设",
+    "themePresetHint": "切换界面的整体色彩和圆角风格，便于后续接入更多主题方案。",
+    "themePresetDefault": "默认",
+    "themePresetDefaultDescription": "保持当前简洁、偏系统感的视觉风格。",
+    "themePresetBubblegum": "糖果主题",
+    "themePresetBubblegumDescription": "更柔和、更明亮的糖果色调，突出主题变化效果。",
+    "themePresetCustom": "自定义",
+    "themePresetCustomDescription": "在设置页里手动调整颜色，创建你自己的主题方案。",
+    "themeCustomPalette": "自定义配色",
+    "themeCustomPaletteHint": "自定义预设只维护一套基础配色，切到深色时会自动叠加深色逻辑。",
+    "themeCustomPaletteHintCollapsed": "当前会按 {{mode}} 预览，自定义只维护一套基础配色，深色会自动推导。",
+    "themeCustomPaletteHintSingle": "这里编辑的是自定义预设的基础配色，切到深色时会自动生成对应的深色版本。",
+    "themeCustomPaletteHintAdvanced": "自定义预设只维护一套基础配色，深色样式会自动推导。",
+    "themePaletteLight": "浅色方案",
+    "themePaletteDark": "深色方案",
+    "themeCustomPaletteTip": "建议优先调整主色、强调色和背景色，再微调边框与 ring。",
+    "themeCustomPaletteResetBase": "重置基础配色",
+    "themeEditorExpand": "展开自定义选项",
+    "themeEditorCollapse": "收起自定义选项",
+    "themeAdvancedEditingShow": "分别编辑浅/深色",
+    "themeAdvancedEditingHide": "关闭分开编辑",
+    "themeEditingBasePalette": "当前编辑基础配色",
+    "themeDarkOverlayBadge": "深色模式自动叠加",
+    "themeColorBackground": "背景色",
+    "themeColorForeground": "前景色",
+    "themeColorCard": "卡片色",
+    "themeColorPrimary": "主色",
+    "themeColorPrimaryForeground": "主色文字",
+    "themeColorSecondary": "次级色",
+    "themeColorSecondaryForeground": "次级色文字",
+    "themeColorAccent": "强调色",
+    "themeColorAccentForeground": "强调色文字",
+    "themeColorCardForeground": "卡片文字",
+    "themeColorPopover": "弹出层色",
+    "themeColorPopoverForeground": "弹出层文字",
+    "themeColorMuted": "弱化色",
+    "themeColorMutedForeground": "弱化色文字",
+    "themeColorDestructive": "危险色",
+    "themeColorDestructiveForeground": "危险色文字",
+    "themeColorSuccess": "成功色",
+    "themeColorInfo": "信息色",
+    "themeColorWarning": "警告色",
+    "themeColorError": "错误色",
+    "themeColorBorder": "边框色",
+    "themeColorInput": "输入框",
+    "themeColorRing": "焦点环",
+    "themeSectionPrimary": "主色",
+    "themeSectionSecondary": "次级色",
+    "themeSectionAccent": "强调色",
+    "themeSectionBase": "基础色",
+    "themeSectionCard": "卡片",
+    "themeSectionPopover": "弹出层",
+    "themeSectionMuted": "弱化色",
+    "themeSectionDestructive": "危险色",
+    "themeSectionSemanticAdvanced": "语义色（高级）",
+    "themeSectionBorderInput": "边框与输入框",
+    "themeSectionTokens": "个颜色项",
+    "themeSectionSurface": "基础表面",
+    "themeSectionBrand": "品牌与强调",
+    "themeEditorSearchPlaceholder": "搜索颜色...",
+    "themeEditorNoResults": "没有匹配的颜色项。",
+    "themeSyncSection": "同步当前分组",
+    "themeSyncSectionTooltip": "自动补齐这一组的关联颜色，例如前景色、输入框或 ring。",
+    "themeAutoSync": "自动生成关联颜色",
+    "themeAutoSyncTooltip": "根据这一项的主颜色自动生成对应的关联颜色。",
+    "themeColorHex": "十六进制",
+    "themeColorField": "取色面板",
+    "themeColorHue": "色相",
+    "themeQuickPicks": "快速颜色",
+    "themePreview": "组件效果预览",
+    "themePreviewHint": "直接看页面层级、状态标签、输入框和按钮在当前配色下是否清晰易读。",
+    "themePreviewCardTitle": "常见界面示例",
+    "themePreviewCardDescription": "这里集中预览卡片、标签、输入框和按钮层级。",
+    "themePreviewStatusLabel": "状态标签",
+    "themePreviewSelected": "已选中",
+    "themePreviewInputLabel": "输入框预览",
+    "themePreviewInputDefault": "默认状态",
+    "themePreviewInputFocused": "聚焦状态",
+    "themePreviewInputPlaceholder": "请输入 API Key",
+    "themePreviewActionsLabel": "按钮层级",
+    "themePreviewActionsHint": "依次预览主按钮、次按钮、强调按钮和危险按钮。",
+    "themePreviewToastLabel": "消息提示",
+    "themePreviewToastHint": "预览 success、info、warning、error 这几类提示的语义色。",
+    "themePreviewToastSuccess": "成功",
+    "themePreviewToastInfo": "信息",
+    "themePreviewToastWarning": "警告",
+    "themePreviewToastError": "错误",
+    "themePreviewToastBody": "这是一条示例提示",
+    "themePreviewAccent": "强调操作",
     "importExport": "SQL 导入导出",
     "importExportHint": "导入/导出数据库 SQL 备份（仅支持导入由 CC Switch 导出的备份），便于备份或迁移。",
     "exportConfig": "导出 SQL 备份",
diff --git a/src/index.css b/src/index.css
index b5094c7f50..16c9cf4c6a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,14 +24,50 @@
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --success: 142 71% 45%;
+    --info: 221 83% 53%;
+    --warning: 38 92% 50%;
+    --error: 0 84.2% 60.2%;
 
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 210 100% 56%;
+    --chart-1: 217 91% 60%;
+    --chart-2: 142 71% 45%;
+    --chart-3: 24 95% 53%;
+    --chart-4: 272 91% 65%;
+    --chart-5: 346 84% 60%;
 
     --radius: 0.5rem;
   }
 
+  :root[data-theme-preset="bubblegum"] {
+    --primary: 333 82% 60%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 318 100% 97%;
+    --secondary-foreground: 326 36% 18%;
+
+    --muted: 312 45% 95%;
+    --muted-foreground: 326 12% 39%;
+    --accent: 42 100% 88%;
+    --accent-foreground: 24 45% 22%;
+
+    --success: 166 68% 42%;
+    --info: 333 82% 60%;
+    --warning: 32 93% 56%;
+    --error: 347 86% 64%;
+    --border: 327 54% 85%;
+    --input: 327 54% 85%;
+    --ring: 333 82% 60%;
+    --chart-1: 333 82% 60%;
+    --chart-2: 166 68% 42%;
+    --chart-3: 32 93% 56%;
+    --chart-4: 279 84% 68%;
+    --chart-5: 347 86% 64%;
+    --radius: 1rem;
+  }
+
   .dark {
     --background: 240 5% 12%;
     --foreground: 0 0% 98%;
@@ -53,50 +89,100 @@
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
+    --success: 142 69% 50%;
+    --info: 217 91% 64%;
+    --warning: 27 95% 61%;
+    --error: 358 100% 81%;
 
     --border: 240 5% 24%;
     --input: 240 5% 24%;
     --ring: 210 100% 54%;
+    --chart-1: 217 91% 64%;
+    --chart-2: 142 69% 50%;
+    --chart-3: 27 95% 61%;
+    --chart-4: 272 95% 72%;
+    --chart-5: 346 84% 68%;
+  }
+
+  .dark[data-theme-preset="bubblegum"] {
+    --background: 318 30% 12%;
+    --foreground: 330 100% 98%;
+    --card: 318 28% 16%;
+    --card-foreground: 330 100% 98%;
+    --popover: 318 28% 16%;
+    --popover-foreground: 330 100% 98%;
+
+    --primary: 332 82% 68%;
+    --primary-foreground: 318 30% 12%;
+
+    --secondary: 314 24% 22%;
+    --secondary-foreground: 330 100% 96%;
+
+    --muted: 314 24% 22%;
+    --muted-foreground: 326 18% 72%;
+    --accent: 36 88% 62%;
+    --accent-foreground: 20 64% 12%;
+
+    --success: 170 66% 48%;
+    --info: 332 82% 68%;
+    --warning: 36 88% 62%;
+    --error: 347 86% 70%;
+    --border: 315 23% 26%;
+    --input: 315 23% 26%;
+    --ring: 332 82% 68%;
+    --chart-1: 332 82% 68%;
+    --chart-2: 170 66% 48%;
+    --chart-3: 36 88% 62%;
+    --chart-4: 276 78% 72%;
+    --chart-5: 347 86% 70%;
+    --radius: 1rem;
   }
 }
 
 .glass {
-  background: rgba(255, 255, 255, 0.7);
+  background: hsl(var(--card) / 0.82);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--border) / 0.75);
+  box-shadow: 0 12px 30px hsl(var(--foreground) / 0.05);
 }
 
 .dark .glass {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: hsl(var(--card) / 0.72);
+  border: 1px solid hsl(var(--border) / 0.8);
+  box-shadow: 0 18px 40px hsl(var(--background) / 0.65);
 }
 
 .glass-card {
-  background: rgba(255, 255, 255, 0.8);
+  background: linear-gradient(
+    160deg,
+    hsl(var(--card) / 0.92) 0%,
+    hsl(var(--card) / 0.78) 100%
+  );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--border) / 0.7);
+  box-shadow: 0 18px 40px hsl(var(--foreground) / 0.07);
 }
 
 .dark .glass-card {
   background: linear-gradient(
     145deg,
-    rgba(255, 255, 255, 0.05) 0%,
-    rgba(255, 255, 255, 0.01) 100%
+    hsl(var(--card) / 0.85) 0%,
+    hsl(var(--card) / 0.68) 100%
   );
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  border: 1px solid hsl(var(--border) / 0.75);
+  box-shadow: 0 18px 40px hsl(var(--background) / 0.75);
 }
 
 .glass-card-active {
-  background: rgba(59, 130, 246, 0.08);
-  border: 1px solid rgba(59, 130, 246, 0.4);
+  background: hsl(var(--primary) / 0.08);
+  border: 1px solid hsl(var(--primary) / 0.35);
 }
 
 .dark .glass-card-active {
-  background: rgba(59, 130, 246, 0.12);
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  background: hsl(var(--primary) / 0.14);
+  border: 1px solid hsl(var(--primary) / 0.28);
 }
 
 .glass-header {
@@ -150,7 +236,8 @@ html.dark {
 }
 
 *:focus-visible {
-  @apply outline-2 outline-blue-500 outline-offset-2;
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
 }
 
 @layer utilities {
diff --git a/src/lib/theme/customTheme.ts b/src/lib/theme/customTheme.ts
new file mode 100644
index 0000000000..dd04797ebd
--- /dev/null
+++ b/src/lib/theme/customTheme.ts
@@ -0,0 +1,517 @@
+export type ThemePreset = "default" | "bubblegum" | "custom";
+export type CustomThemeMode = "light" | "dark";
+
+export const CUSTOM_THEME_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "cardForeground",
+  "popover",
+  "popoverForeground",
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "muted",
+  "mutedForeground",
+  "accent",
+  "accentForeground",
+  "destructive",
+  "destructiveForeground",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "border",
+  "input",
+  "ring",
+] as const;
+
+export type CustomThemeToken = (typeof CUSTOM_THEME_TOKENS)[number];
+export type CustomThemePalette = Record<CustomThemeToken, string>;
+export type CustomThemeConfig = Record<CustomThemeMode, CustomThemePalette>;
+
+export const CUSTOM_THEME_VARIABLES = [
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--secondary",
+  "--secondary-foreground",
+  "--muted",
+  "--muted-foreground",
+  "--accent",
+  "--accent-foreground",
+  "--destructive",
+  "--destructive-foreground",
+  "--success",
+  "--info",
+  "--warning",
+  "--error",
+  "--border",
+  "--input",
+  "--ring",
+  "--chart-1",
+  "--chart-2",
+  "--chart-3",
+  "--chart-4",
+  "--chart-5",
+] as const;
+
+export const DEFAULT_THEME_PRESET: ThemePreset = "default";
+
+const DEFAULT_LIGHT_CUSTOM_THEME: CustomThemePalette = {
+  background: "#ffffff",
+  foreground: "#09090b",
+  card: "#ffffff",
+  cardForeground: "#09090b",
+  popover: "#ffffff",
+  popoverForeground: "#09090b",
+  primary: "#1f9cff",
+  primaryForeground: "#ffffff",
+  secondary: "#f4f4f5",
+  secondaryForeground: "#18181b",
+  muted: "#f4f4f5",
+  mutedForeground: "#71717a",
+  accent: "#f4f4f5",
+  accentForeground: "#18181b",
+  destructive: "#ef4444",
+  destructiveForeground: "#fafafa",
+  success: "#16a34a",
+  info: "#2563eb",
+  warning: "#d97706",
+  error: "#ef4444",
+  border: "#e4e4e7",
+  input: "#e4e4e7",
+  ring: "#1f9cff",
+};
+
+export function normalizeHex(value: string): string {
+  const trimmed = value.trim();
+  return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+}
+
+export function isHexColor(value: string): boolean {
+  return /^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(value);
+}
+
+export function hexToRgb(hex: string) {
+  const normalized = normalizeHex(hex).replace("#", "");
+  const fullHex =
+    normalized.length === 3
+      ? normalized
+          .split("")
+          .map((char) => `${char}${char}`)
+          .join("")
+      : normalized;
+
+  const int = Number.parseInt(fullHex, 16);
+  return {
+    r: (int >> 16) & 255,
+    g: (int >> 8) & 255,
+    b: int & 255,
+  };
+}
+
+export function getReadableTextColor(hex: string): string {
+  const { r, g, b } = hexToRgb(hex);
+  const toLinear = (channel: number) => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  };
+
+  const luminance =
+    0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+
+  return luminance > 0.58 ? "#111827" : "#ffffff";
+}
+
+export function mixHex(base: string, target: string, ratio: number): string {
+  const a = hexToRgb(base);
+  const b = hexToRgb(target);
+  const channel = (start: number, end: number) =>
+    Math.round(start + (end - start) * ratio)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${channel(a.r, b.r)}${channel(a.g, b.g)}${channel(a.b, b.b)}`;
+}
+
+export function hexToHslValues(hex: string) {
+  const { r, g, b } = hexToRgb(hex);
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  let hue = 0;
+  let saturation = 0;
+  const lightness = (max + min) / 2;
+
+  if (max !== min) {
+    const delta = max - min;
+    saturation =
+      lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      case red:
+        hue = (green - blue) / delta + (green < blue ? 6 : 0);
+        break;
+      case green:
+        hue = (blue - red) / delta + 2;
+        break;
+      default:
+        hue = (red - green) / delta + 4;
+        break;
+    }
+    hue /= 6;
+  }
+
+  return { h: hue * 360, s: saturation, l: lightness };
+}
+
+export function hexToHslString(hex: string): string {
+  const { h, s, l } = hexToHslValues(hex);
+  return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+export function hslToHex(h: number, s: number, l: number): string {
+  const hue = ((h % 360) + 360) % 360;
+  const saturation = Math.max(0, Math.min(1, s));
+  const lightness = Math.max(0, Math.min(1, l));
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = lightness - chroma / 2;
+
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (hue < 60) {
+    red = chroma;
+    green = x;
+  } else if (hue < 120) {
+    red = x;
+    green = chroma;
+  } else if (hue < 180) {
+    green = chroma;
+    blue = x;
+  } else if (hue < 240) {
+    green = x;
+    blue = chroma;
+  } else if (hue < 300) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+
+  const toHex = (value: number) =>
+    Math.round((value + m) * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+}
+
+export function remapForDark(
+  hex: string,
+  targetLightness: number,
+  options: { satScale?: number; minSat?: number; maxSat?: number } = {},
+) {
+  const { h, s } = hexToHslValues(hex);
+  const scaledSaturation = s * (options.satScale ?? 1);
+  const nextSaturation = Math.min(
+    options.maxSat ?? 1,
+    Math.max(options.minSat ?? 0, scaledSaturation),
+  );
+  return hslToHex(h, nextSaturation, targetLightness);
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  return `#${[r, g, b]
+    .map((channel) => Math.max(0, Math.min(255, Math.round(channel))))
+    .map((channel) => channel.toString(16).padStart(2, "0"))
+    .join("")}`;
+}
+
+function rgbToHsv(r: number, g: number, b: number) {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  let hue = 0;
+
+  if (delta !== 0) {
+    if (max === red) hue = ((green - blue) / delta) % 6;
+    else if (max === green) hue = (blue - red) / delta + 2;
+    else hue = (red - green) / delta + 4;
+  }
+
+  hue = Math.round(hue * 60);
+  if (hue < 0) hue += 360;
+
+  return {
+    h: hue,
+    s: max === 0 ? 0 : delta / max,
+    v: max,
+  };
+}
+
+export function hexToHsv(hex: string) {
+  const { r, g, b } = hexToRgb(hex);
+  return rgbToHsv(r, g, b);
+}
+
+export function hsvToHex(h: number, s: number, v: number) {
+  const hue = ((h % 360) + 360) % 360;
+  const chroma = v * s;
+  const x = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = v - chroma;
+
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (hue < 60) {
+    red = chroma;
+    green = x;
+  } else if (hue < 120) {
+    red = x;
+    green = chroma;
+  } else if (hue < 180) {
+    green = chroma;
+    blue = x;
+  } else if (hue < 240) {
+    green = x;
+    blue = chroma;
+  } else if (hue < 300) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+
+  return rgbToHex((red + m) * 255, (green + m) * 255, (blue + m) * 255);
+}
+
+export function deriveDarkPalette(
+  base: CustomThemePalette,
+): CustomThemePalette {
+  const background = remapForDark(base.background, 0.12, {
+    satScale: 0.3,
+    maxSat: 0.18,
+  });
+  const foreground = getReadableTextColor(background);
+  const card = remapForDark(base.card, 0.16, {
+    satScale: 0.35,
+    maxSat: 0.2,
+  });
+  const cardForeground = getReadableTextColor(card);
+  const popover = remapForDark(base.popover, 0.16, {
+    satScale: 0.35,
+    maxSat: 0.2,
+  });
+  const popoverForeground = getReadableTextColor(popover);
+  const primaryBase = hexToHslValues(base.primary);
+  const primary = hslToHex(
+    primaryBase.h,
+    Math.min(0.95, Math.max(0.5, primaryBase.s * 1.05)),
+    Math.min(0.68, Math.max(0.58, primaryBase.l * 0.92)),
+  );
+  const primaryForeground = getReadableTextColor(primary);
+  const secondary = remapForDark(base.secondary, 0.22, {
+    satScale: 0.5,
+    maxSat: 0.28,
+  });
+  const secondaryForeground = getReadableTextColor(secondary);
+  const muted = remapForDark(base.muted, 0.22, {
+    satScale: 0.35,
+    maxSat: 0.22,
+  });
+  const mutedForeground = mixHex(foreground, background, 0.32);
+  const accent = remapForDark(base.accent, 0.24, {
+    satScale: 0.55,
+    maxSat: 0.32,
+  });
+  const accentForeground = getReadableTextColor(accent);
+  const destructive = remapForDark(base.destructive, 0.34, {
+    satScale: 0.85,
+    minSat: 0.45,
+    maxSat: 0.78,
+  });
+  const destructiveForeground = getReadableTextColor(destructive);
+  const success = remapForDark(base.success, 0.56, {
+    satScale: 0.92,
+    minSat: 0.46,
+    maxSat: 0.82,
+  });
+  const info = remapForDark(base.info, 0.62, {
+    satScale: 0.96,
+    minSat: 0.44,
+    maxSat: 0.86,
+  });
+  const warning = remapForDark(base.warning, 0.62, {
+    satScale: 0.98,
+    minSat: 0.5,
+    maxSat: 0.9,
+  });
+  const error = remapForDark(base.error, 0.62, {
+    satScale: 0.94,
+    minSat: 0.5,
+    maxSat: 0.88,
+  });
+  const border = remapForDark(base.border, 0.26, {
+    satScale: 0.25,
+    maxSat: 0.16,
+  });
+  const input = remapForDark(base.input, 0.26, {
+    satScale: 0.25,
+    maxSat: 0.16,
+  });
+  const ringBase = hexToHslValues(base.ring);
+  const ring = hslToHex(
+    ringBase.h,
+    Math.min(0.92, Math.max(0.45, ringBase.s)),
+    Math.min(0.7, Math.max(0.58, ringBase.l * 0.96)),
+  );
+
+  return {
+    background,
+    foreground,
+    card,
+    cardForeground,
+    popover,
+    popoverForeground,
+    primary,
+    primaryForeground,
+    secondary,
+    secondaryForeground,
+    muted,
+    mutedForeground,
+    accent,
+    accentForeground,
+    destructive,
+    destructiveForeground,
+    success,
+    info,
+    warning,
+    error,
+    border,
+    input,
+    ring,
+  };
+}
+
+function shiftChartHue(
+  hex: string,
+  hueShift: number,
+  targetLightness: number,
+  options: { satScale?: number; minSat?: number; maxSat?: number } = {},
+) {
+  const { h, s } = hexToHslValues(hex);
+  const scaledSaturation = s * (options.satScale ?? 1);
+  const nextSaturation = Math.min(
+    options.maxSat ?? 1,
+    Math.max(options.minSat ?? 0, scaledSaturation),
+  );
+  return hslToHex(h + hueShift, nextSaturation, targetLightness);
+}
+
+export function deriveChartPalette(
+  palette: CustomThemePalette,
+  mode: CustomThemeMode,
+) {
+  return {
+    chart1: palette.primary,
+    chart2: shiftChartHue(palette.primary, 115, mode === "dark" ? 0.5 : 0.42, {
+      satScale: 0.95,
+      minSat: 0.42,
+      maxSat: 0.9,
+    }),
+    chart3: shiftChartHue(palette.primary, 38, mode === "dark" ? 0.6 : 0.52, {
+      satScale: 1.08,
+      minSat: 0.46,
+      maxSat: 0.95,
+    }),
+    chart4: shiftChartHue(palette.primary, 72, mode === "dark" ? 0.7 : 0.6, {
+      satScale: 0.92,
+      minSat: 0.42,
+      maxSat: 0.88,
+    }),
+    chart5: palette.destructive,
+  };
+}
+
+export function deriveStatusPalette(
+  palette: CustomThemePalette,
+  _mode: CustomThemeMode,
+) {
+  return {
+    success: palette.success,
+    warning: palette.warning,
+  };
+}
+
+export function createCustomThemeConfig(
+  lightPalette: CustomThemePalette,
+): CustomThemeConfig {
+  const nextLight = { ...lightPalette };
+  return {
+    light: nextLight,
+    dark: deriveDarkPalette(nextLight),
+  };
+}
+
+function getExplicitDarkOverrides(
+  config: CustomThemeConfig,
+): Partial<CustomThemePalette> {
+  const derivedDark = deriveDarkPalette(config.light);
+  const overrides: Partial<CustomThemePalette> = {};
+
+  for (const token of CUSTOM_THEME_TOKENS) {
+    if (config.dark[token].toLowerCase() !== derivedDark[token].toLowerCase()) {
+      overrides[token] = config.dark[token];
+    }
+  }
+
+  return overrides;
+}
+
+export function syncDerivedDarkPalette(
+  config: CustomThemeConfig,
+  options?: {
+    preserveDarkOverrides?: boolean;
+    sourceConfig?: CustomThemeConfig;
+  },
+): CustomThemeConfig {
+  const next = createCustomThemeConfig(config.light);
+
+  if (!options?.preserveDarkOverrides) {
+    return next;
+  }
+
+  const overrides = getExplicitDarkOverrides(options.sourceConfig ?? config);
+  if (Object.keys(overrides).length === 0) {
+    return next;
+  }
+
+  return {
+    light: next.light,
+    dark: {
+      ...next.dark,
+      ...overrides,
+    },
+  };
+}
+
+export const DEFAULT_CUSTOM_THEME = createCustomThemeConfig(
+  DEFAULT_LIGHT_CUSTOM_THEME,
+);
diff --git a/tests/components/ProviderPresetSelector.test.tsx b/tests/components/ProviderPresetSelector.test.tsx
new file mode 100644
index 0000000000..f7bc9fbcff
--- /dev/null
+++ b/tests/components/ProviderPresetSelector.test.tsx
@@ -0,0 +1,83 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it, vi } from "vitest";
+import { ProviderPresetSelector } from "@/components/providers/forms/ProviderPresetSelector";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, values?: Record<string, string>) =>
+      values?.defaultValue ?? key,
+  }),
+}));
+
+vi.mock("@/components/ui/form", () => ({
+  FormLabel: ({ children }: { children: React.ReactNode }) => (
+    <label>{children}</label>
+  ),
+}));
+
+vi.mock("@/components/BrandIcons", () => ({
+  ClaudeIcon: () => <span>ClaudeIcon</span>,
+  CodexIcon: () => <span>CodexIcon</span>,
+  GeminiIcon: () => <span>GeminiIcon</span>,
+}));
+
+vi.mock("@/components/ProviderIcon", () => ({
+  ProviderIcon: ({ name }: { name: string }) => <span>{name}</span>,
+}));
+
+vi.mock("@/config/universalProviderPresets", () => ({
+  universalProviderPresets: [
+    {
+      providerType: "shared-demo",
+      icon: "apps",
+      name: "Shared Demo",
+    },
+  ],
+}));
+
+describe("ProviderPresetSelector", () => {
+  it("uses shared readable text fallback for selected preset colors", () => {
+    render(
+      <ProviderPresetSelector
+        selectedPresetId="preset-light"
+        groupedPresets={{
+          official: [
+            {
+              id: "preset-light",
+              preset: {
+                name: "Pastel",
+                theme: {
+                  backgroundColor: "#fff1f7",
+                },
+              } as any,
+            },
+          ],
+        }}
+        categoryKeys={["official"]}
+        presetCategoryLabels={{ official: "Official" }}
+        onPresetChange={() => {}}
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: /Pastel/ });
+    expect(button.style.backgroundColor).toBe("rgb(255, 241, 247)");
+    expect(button.style.color).toBe("rgb(17, 24, 39)");
+  });
+
+  it("renders the universal provider badge with a supported primary tint class", () => {
+    const { container } = render(
+      <ProviderPresetSelector
+        selectedPresetId={null}
+        groupedPresets={{}}
+        categoryKeys={[]}
+        presetCategoryLabels={{}}
+        onPresetChange={() => {}}
+        onUniversalPresetSelect={() => {}}
+      />,
+    );
+
+    const badge = container.querySelector(".bg-primary\\/10");
+    expect(badge).toHaveClass("bg-primary/10");
+  });
+});
diff --git a/tests/components/ThemeSettings.test.tsx b/tests/components/ThemeSettings.test.tsx
new file mode 100644
index 0000000000..152130331e
--- /dev/null
+++ b/tests/components/ThemeSettings.test.tsx
@@ -0,0 +1,294 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ThemeSettings } from "@/components/settings/ThemeSettings";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, values?: Record<string, string>) =>
+      typeof values?.mode === "string" ? `${key}:${values.mode}` : key,
+  }),
+}));
+
+const themeState = vi.hoisted(() => {
+  const customPalette = {
+    background: "#ffffff",
+    foreground: "#09090b",
+    card: "#ffffff",
+    cardForeground: "#09090b",
+    popover: "#ffffff",
+    popoverForeground: "#09090b",
+    primary: "#1f9cff",
+    primaryForeground: "#ffffff",
+    secondary: "#f4f4f5",
+    secondaryForeground: "#18181b",
+    muted: "#f4f4f5",
+    mutedForeground: "#71717a",
+    accent: "#f4f4f5",
+    accentForeground: "#18181b",
+    destructive: "#ef4444",
+    destructiveForeground: "#fafafa",
+    success: "#16a34a",
+    info: "#2563eb",
+    warning: "#d97706",
+    error: "#ef4444",
+    border: "#e4e4e7",
+    input: "#e4e4e7",
+    ring: "#1f9cff",
+  };
+
+  return {
+    setTheme: vi.fn(),
+    setThemePreset: vi.fn(),
+    setCustomThemeColor: vi.fn(),
+    setCustomThemeColors: vi.fn(),
+    resetCustomTheme: vi.fn(),
+    customTheme: {
+      light: customPalette,
+      dark: customPalette,
+    },
+  };
+});
+
+vi.mock("@/components/theme-provider", () => ({
+  useTheme: () => ({
+    theme: "system",
+    themePreset: "custom",
+    customTheme: themeState.customTheme,
+    setTheme: themeState.setTheme,
+    setThemePreset: themeState.setThemePreset,
+    setCustomThemeColor: themeState.setCustomThemeColor,
+    setCustomThemeColors: themeState.setCustomThemeColors,
+    resetCustomTheme: themeState.resetCustomTheme,
+  }),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: any) => <button {...props}>{children}</button>,
+}));
+
+vi.mock("@/components/ui/collapsible", () => ({
+  Collapsible: ({ children }: any) => <div>{children}</div>,
+  CollapsibleContent: ({ children }: any) => <div>{children}</div>,
+  CollapsibleTrigger: ({ children }: any) => <>{children}</>,
+}));
+
+vi.mock("@/components/ui/input", () => ({
+  Input: (props: any) => <input {...props} />,
+}));
+
+vi.mock("@/components/ui/popover", () => ({
+  Popover: ({ children }: any) => <div>{children}</div>,
+  PopoverTrigger: ({ children }: any) => <>{children}</>,
+  PopoverContent: ({ children }: any) => <div>{children}</div>,
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({ children }: any) => <div>{children}</div>,
+}));
+
+vi.mock("@/components/ui/tooltip", () => ({
+  TooltipProvider: ({ children }: any) => <div>{children}</div>,
+  Tooltip: ({ children }: any) => <div>{children}</div>,
+  TooltipTrigger: ({ children }: any) => <>{children}</>,
+  TooltipContent: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe("ThemeSettings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: true,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      })),
+    });
+  });
+
+  it("labels the custom editor as editing the base palette even in dark preview mode", () => {
+    render(<ThemeSettings />);
+
+    expect(
+      screen.getByText("settings.themeEditingBasePalette"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", {
+        name: "settings.themeCustomPaletteResetBase",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "settings.themeCustomPaletteHintCollapsed:settings.themePaletteDark",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/settings\.themeEditingCurrentMode/),
+    ).not.toBeInTheDocument();
+  });
+
+  it("uses dedicated label keys for linked foreground and surface fields", () => {
+    render(<ThemeSettings />);
+
+    expect(
+      screen.getAllByText("settings.themeColorPrimaryForeground").length,
+    ).toBeGreaterThan(0);
+    expect(
+      screen.getAllByText("settings.themeColorPopoverForeground").length,
+    ).toBeGreaterThan(0);
+    expect(screen.getAllByText("settings.themeColorMuted").length).toBeGreaterThan(
+      0,
+    );
+    expect(
+      screen.getAllByText("settings.themeColorDestructiveForeground").length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("allows partial hex editing and only commits when the value becomes valid", () => {
+    render(<ThemeSettings />);
+
+    const input = screen.getByLabelText(
+      "settings.themeColorPrimary settings.themeColorHex",
+    );
+
+    fireEvent.change(input, { target: { value: "#12" } });
+    expect(input).toHaveValue("#12");
+    expect(themeState.setCustomThemeColor).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "123456" } });
+    fireEvent.blur(input);
+
+    expect(themeState.setCustomThemeColor).toHaveBeenCalledWith(
+      "light",
+      "primary",
+      "#123456",
+    );
+  });
+
+  it("adds accessible labels to picker controls and clears drag listeners on unmount", () => {
+    const addSpy = vi.spyOn(window, "addEventListener");
+    const removeSpy = vi.spyOn(window, "removeEventListener");
+
+    const { unmount } = render(<ThemeSettings />);
+
+    const fieldSlider = screen.getByLabelText(
+      "settings.themeColorPrimary settings.themeColorField",
+    );
+    const hueSlider = screen.getByLabelText(
+      "settings.themeColorPrimary settings.themeColorHue",
+    );
+    const quickPick = screen.getByLabelText(
+      "settings.themeColorPrimary #FFFFFF",
+    );
+
+    expect(fieldSlider).toHaveAttribute("role", "slider");
+    expect(hueSlider).toHaveAttribute("role", "slider");
+    expect(quickPick).toBeInTheDocument();
+
+    fireEvent.pointerDown(fieldSlider, { clientX: 12, clientY: 18 });
+    unmount();
+
+    expect(
+      addSpy.mock.calls.some(([type]) => type === "pointermove"),
+    ).toBe(true);
+    expect(
+      removeSpy.mock.calls.some(([type]) => type === "pointermove"),
+    ).toBe(true);
+    expect(
+      removeSpy.mock.calls.some(([type]) => type === "pointerup"),
+    ).toBe(true);
+    expect(
+      removeSpy.mock.calls.some(([type]) => type === "pointercancel"),
+    ).toBe(true);
+  });
+
+  it("filters sections by search query and syncs linked colors for the matching section", () => {
+    render(<ThemeSettings />);
+
+    fireEvent.change(screen.getByPlaceholderText("settings.themeEditorSearchPlaceholder"), {
+      target: { value: "primary" },
+    });
+
+    expect(screen.getByText("settings.themeSectionPrimary")).toBeInTheDocument();
+    expect(screen.queryByText("settings.themeSectionSecondary")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText("settings.themeSyncSection"));
+
+    expect(themeState.setCustomThemeColors).toHaveBeenCalledWith("light", {
+      primaryForeground: "#ffffff",
+    });
+  });
+
+  it("shows semantic colors as an advanced section without a sync action", () => {
+    render(<ThemeSettings />);
+
+    fireEvent.change(
+      screen.getByPlaceholderText("settings.themeEditorSearchPlaceholder"),
+      {
+        target: { value: "success" },
+      },
+    );
+
+    expect(
+      screen.getByText("settings.themeSectionSemanticAdvanced"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText("settings.themeSyncSection"),
+    ).not.toBeInTheDocument();
+    expect(screen.getAllByText("settings.themeColorSuccess").length).toBeGreaterThan(
+      0,
+    );
+  });
+
+  it("renders the info toast preview from the dedicated info token", () => {
+    render(<ThemeSettings />);
+
+    const infoToast = screen
+      .getByText("settings.themePreviewToastInfo")
+      .parentElement;
+
+    expect(infoToast).toHaveStyle({
+      color: "rgb(37, 99, 235)",
+    });
+  });
+
+  it("renders preview controls as inert examples instead of interactive form elements", () => {
+    render(<ThemeSettings />);
+
+    expect(
+      screen.queryByRole("button", { name: "common.save" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "common.confirm" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "common.cancel" }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByDisplayValue("sk-cc-switch-demo")).not.toBeInTheDocument();
+    expect(screen.getByText("sk-cc-switch-demo").tagName).toBe("DIV");
+  });
+
+  it("allows partial editing inside the popover hex input before committing a valid value", () => {
+    render(<ThemeSettings />);
+
+    const input = screen.getByLabelText(
+      "settings.themeColorPrimary settings.themeColorHex",
+    );
+
+    fireEvent.change(input, { target: { value: "#12" } });
+    expect(input).toHaveValue("#12");
+    expect(themeState.setCustomThemeColor).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "#654321" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(themeState.setCustomThemeColor).toHaveBeenCalledWith(
+      "light",
+      "primary",
+      "#654321",
+    );
+  });
+});
diff --git a/tests/components/UsageSummaryCards.test.tsx b/tests/components/UsageSummaryCards.test.tsx
new file mode 100644
index 0000000000..6018cd0ddf
--- /dev/null
+++ b/tests/components/UsageSummaryCards.test.tsx
@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, expect, it, vi } from "vitest";
+import { UsageSummaryCards } from "@/components/usage/UsageSummaryCards";
+
+const summary = {
+  totalRequests: 42,
+  totalCost: 1.2345,
+  totalInputTokens: 1000,
+  totalOutputTokens: 2000,
+  totalCacheCreationTokens: 300,
+  totalCacheReadTokens: 400,
+};
+
+const useUsageSummaryMock = vi.fn(
+  (_days: number, _options?: { refetchInterval?: number | false }) => ({
+    data: summary,
+    isLoading: false,
+  }),
+);
+
+const parseFiniteNumberMock = vi.fn((value: unknown): number | null =>
+  typeof value === "number" ? value : null,
+);
+const fmtUsdMock = vi.fn((value: number, digits = 4) => `$${value.toFixed(digits)}`);
+
+vi.mock("react-i18next", () => {
+  const t = (key: string) => key;
+  return {
+    useTranslation: () => ({ t }),
+  };
+});
+
+vi.mock("@/lib/query/usage", () => ({
+  useUsageSummary: (days: number, options?: { refetchInterval?: number | false }) =>
+    useUsageSummaryMock(days, options),
+}));
+
+vi.mock("@/components/usage/format", () => ({
+  parseFiniteNumber: (value: unknown) => parseFiniteNumberMock(value),
+  fmtUsd: (value: number, digits?: number) => fmtUsdMock(value, digits),
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({
+      children,
+      ...props
+    }: React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }) => (
+    <div {...props}>{children}</div>
+  ),
+  CardContent: ({
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & { children: React.ReactNode }) => (
+    <div {...props}>{children}</div>
+  ),
+}));
+
+describe("UsageSummaryCards", () => {
+  it("does not recompute summary stats on identical rerenders", () => {
+    const { rerender } = render(
+      <UsageSummaryCards days={7} refreshIntervalMs={0} />,
+    );
+
+    expect(parseFiniteNumberMock).toHaveBeenCalledTimes(1);
+    expect(fmtUsdMock).toHaveBeenCalledTimes(1);
+
+    rerender(<UsageSummaryCards days={7} refreshIntervalMs={0} />);
+
+    expect(parseFiniteNumberMock).toHaveBeenCalledTimes(1);
+    expect(fmtUsdMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/tests/components/theme-provider.test.tsx b/tests/components/theme-provider.test.tsx
new file mode 100644
index 0000000000..981eeef195
--- /dev/null
+++ b/tests/components/theme-provider.test.tsx
@@ -0,0 +1,416 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { useEffect } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThemeProvider, useTheme } from "@/components/theme-provider";
+import {
+  DEFAULT_CUSTOM_THEME,
+  deriveDarkPalette,
+  hexToHslString,
+} from "@/lib/theme/customTheme";
+
+const invokeMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+
+vi.mock("@tauri-apps/api/core", () => ({
+  invoke: invokeMock,
+}));
+
+let prefersDark = false;
+const mediaQueryListeners = new Set<(event: MediaQueryListEvent) => void>();
+
+const mediaQueryList = {
+  get matches() {
+    return prefersDark;
+  },
+  media: "(prefers-color-scheme: dark)",
+  addEventListener: (_event: string, listener: (event: MediaQueryListEvent) => void) => {
+    mediaQueryListeners.add(listener);
+  },
+  removeEventListener: (
+    _event: string,
+    listener: (event: MediaQueryListEvent) => void,
+  ) => {
+    mediaQueryListeners.delete(listener);
+  },
+};
+
+function installMatchMedia(initialDark: boolean) {
+  prefersDark = initialDark;
+  mediaQueryListeners.clear();
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    writable: true,
+    value: vi.fn().mockImplementation(() => mediaQueryList),
+  });
+}
+
+function emitSystemThemeChange(nextDark: boolean) {
+  prefersDark = nextDark;
+  act(() => {
+    for (const listener of [...mediaQueryListeners]) {
+      listener({
+        matches: nextDark,
+        media: mediaQueryList.media,
+      } as MediaQueryListEvent);
+    }
+  });
+}
+
+function ThemeHarness() {
+  const { setThemePreset, setCustomThemeColor } = useTheme();
+
+  useEffect(() => {
+    setThemePreset("custom");
+    setCustomThemeColor("light", "background", "#ffffff");
+    // Theme actions are invoked once to seed the custom preset before assertions.
+    // The provider recreates these callbacks when theme state changes, so we
+    // intentionally avoid depending on them here to prevent a test-only loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+function ExplicitDarkThemeHarness() {
+  const { setTheme, setThemePreset, setCustomThemeColor } = useTheme();
+
+  useEffect(() => {
+    setThemePreset("custom");
+    setTheme("dark");
+    setCustomThemeColor("light", "background", "#ffffff");
+    setCustomThemeColor("dark", "background", "#000000");
+    // Seed the explicit palettes once for deterministic assertions.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+function SemanticThemeHarness() {
+  const { setThemePreset, setCustomThemeColor } = useTheme();
+
+  useEffect(() => {
+    setThemePreset("custom");
+    setCustomThemeColor("light", "success", "#22c55e");
+    setCustomThemeColor("light", "info", "#0ea5e9");
+    setCustomThemeColor("light", "warning", "#f59e0b");
+    setCustomThemeColor("light", "error", "#ef4444");
+    // Seed semantic colors once for stable CSS variable assertions.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+function LightUpdatePreservesDarkOverrideHarness() {
+  const { setCustomThemeColor } = useTheme();
+
+  useEffect(() => {
+    setCustomThemeColor("light", "primary", "#f97316");
+    // Trigger a base palette edit to verify dark overrides survive recomputation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+function LightResetPreservesDarkOverrideHarness() {
+  const { resetCustomTheme } = useTheme();
+
+  useEffect(() => {
+    resetCustomTheme("light");
+    // Reset the base palette and ensure explicit dark overrides are still kept.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
+describe("ThemeProvider", () => {
+  beforeEach(() => {
+    installMatchMedia(false);
+    window.localStorage.clear();
+    invokeMock.mockClear();
+    document.documentElement.className = "";
+    document.documentElement.dataset.themePreset = "";
+    document.documentElement.style.removeProperty("--background");
+  });
+
+  afterEach(() => {
+    document.documentElement.className = "";
+    document.documentElement.dataset.themePreset = "";
+    document.documentElement.style.removeProperty("--background");
+  });
+
+  it("reapplies custom theme variables when system theme changes", async () => {
+    render(
+      <ThemeProvider>
+        <ThemeHarness />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).toBe(
+        "0 0% 100%",
+      );
+    });
+    expect(document.documentElement.classList.contains("light")).toBe(true);
+
+    emitSystemThemeChange(true);
+
+    await waitFor(() => {
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).not.toBe(
+        "0 0% 100%",
+      );
+    });
+
+    emitSystemThemeChange(false);
+
+    await waitFor(() => {
+      expect(document.documentElement.classList.contains("light")).toBe(true);
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).toBe(
+        "0 0% 100%",
+      );
+    });
+  });
+
+  it("uses the explicit dark custom palette instead of deriving from the light palette", async () => {
+    render(
+      <ThemeProvider>
+        <ExplicitDarkThemeHarness />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).toBe(
+        "0 0% 0%",
+      );
+    });
+  });
+
+  it("applies semantic custom colors to the root CSS variables", async () => {
+    render(
+      <ThemeProvider>
+        <SemanticThemeHarness />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--success")).toBe(
+        "142 71% 45%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        "199 89% 48%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--warning")).toBe(
+        "38 92% 50%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--error")).toBe(
+        "0 84% 60%",
+      );
+    });
+  });
+
+  it("restores explicit dark custom colors from storage without re-deriving them", async () => {
+    window.localStorage.setItem("cc-switch-theme", "dark");
+    window.localStorage.setItem("cc-switch-theme-preset", "custom");
+    window.localStorage.setItem(
+      "cc-switch-theme-custom",
+      JSON.stringify({
+        light: {
+          background: "#ffffff",
+          info: "#2563eb",
+        },
+        dark: {
+          background: "#000000",
+          info: "#22d3ee",
+        },
+      }),
+    );
+
+    render(
+      <ThemeProvider>
+        <div>theme</div>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).toBe(
+        "0 0% 0%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        "188 86% 53%",
+      );
+    });
+  });
+
+  it("derives dark colors from a stored light-only payload", async () => {
+    const storedLight = {
+      ...DEFAULT_CUSTOM_THEME.light,
+      info: "#22d3ee",
+    };
+    const derivedDark = deriveDarkPalette(storedLight);
+
+    window.localStorage.setItem("cc-switch-theme", "dark");
+    window.localStorage.setItem("cc-switch-theme-preset", "custom");
+    window.localStorage.setItem(
+      "cc-switch-theme-custom",
+      JSON.stringify({
+        light: {
+          info: "#22d3ee",
+        },
+      }),
+    );
+
+    render(
+      <ThemeProvider>
+        <div>theme</div>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        hexToHslString(derivedDark.info),
+      );
+    });
+  });
+
+  it("only applies dark overrides that are explicitly stored", async () => {
+    const storedLight = {
+      ...DEFAULT_CUSTOM_THEME.light,
+      primary: "#f97316",
+      info: "#2563eb",
+    };
+    const derivedDark = deriveDarkPalette(storedLight);
+
+    window.localStorage.setItem("cc-switch-theme", "dark");
+    window.localStorage.setItem("cc-switch-theme-preset", "custom");
+    window.localStorage.setItem(
+      "cc-switch-theme-custom",
+      JSON.stringify({
+        light: {
+          primary: "#f97316",
+          info: "#2563eb",
+        },
+        dark: {
+          info: "#22d3ee",
+        },
+      }),
+    );
+
+    render(
+      <ThemeProvider>
+        <div>theme</div>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--primary")).toBe(
+        hexToHslString(derivedDark.primary),
+      );
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        "188 86% 53%",
+      );
+    });
+  });
+
+  it("keeps explicit dark overrides when the light palette is edited", async () => {
+    window.localStorage.setItem("cc-switch-theme", "dark");
+    window.localStorage.setItem("cc-switch-theme-preset", "custom");
+    window.localStorage.setItem(
+      "cc-switch-theme-custom",
+      JSON.stringify({
+        light: {
+          background: "#ffffff",
+          info: "#2563eb",
+        },
+        dark: {
+          background: "#000000",
+          info: "#22d3ee",
+        },
+      }),
+    );
+
+    render(
+      <ThemeProvider>
+        <LightUpdatePreservesDarkOverrideHarness />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--primary")).not.toBe(
+        "206 95% 58%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        "188 86% 53%",
+      );
+    });
+  });
+
+  it("keeps explicit dark overrides when the light palette is reset", async () => {
+    window.localStorage.setItem("cc-switch-theme", "dark");
+    window.localStorage.setItem("cc-switch-theme-preset", "custom");
+    window.localStorage.setItem(
+      "cc-switch-theme-custom",
+      JSON.stringify({
+        light: {
+          background: "#ffffff",
+          info: "#2563eb",
+        },
+        dark: {
+          background: "#000000",
+          info: "#22d3ee",
+        },
+      }),
+    );
+
+    render(
+      <ThemeProvider>
+        <LightResetPreservesDarkOverrideHarness />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.dataset.themePreset).toBe("custom");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--background")).toBe(
+        "0 0% 0%",
+      );
+      expect(document.documentElement.style.getPropertyValue("--info")).toBe(
+        "188 86% 53%",
+      );
+    });
+  });
+});