diff --git a/src/App.tsx b/src/App.tsx
index f1c038f..cec3f12 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -249,7 +249,11 @@ function App() {
 
           <div className="flex flex-wrap items-center gap-3">
             <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
-            <Button variant="outline" onClick={() => setIsMcpOpen(true)}>
+            <Button
+              variant="mcp"
+              onClick={() => setIsMcpOpen(true)}
+              className="min-w-[80px]"
+            >
               MCP
             </Button>
             <Button onClick={() => setIsAddOpen(true)}>
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index d1aac0e..c024c78 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -196,12 +196,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
           </h3>
 
           <div className="flex items-center gap-3">
-            <Button
-              type="button"
-              size="sm"
-              onClick={handleAdd}
-              className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-            >
+            <Button type="button" variant="mcp" size="sm" onClick={handleAdd}>
               <Plus size={16} />
               {t("mcp.add")}
             </Button>
@@ -270,12 +265,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
 
         {/* Footer */}
         <div className="flex-shrink-0 flex items-center justify-end p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
-          <Button
-            type="button"
-            size="sm"
-            onClick={onClose}
-            className="bg-emerald-500 text-white hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700"
-          >
+          <Button type="button" variant="mcp" size="sm" onClick={onClose}>
             <Check size={16} />
             {t("common.done")}
           </Button>
diff --git a/src/components/providers/EditProviderDialog.tsx b/src/components/providers/EditProviderDialog.tsx
index f62e25c..e620455 100644
--- a/src/components/providers/EditProviderDialog.tsx
+++ b/src/components/providers/EditProviderDialog.tsx
@@ -45,9 +45,7 @@ export function EditProviderDialog({
         name: values.name.trim(),
         websiteUrl: values.websiteUrl?.trim() || undefined,
         settingsConfig: parsedConfig,
-        ...(values.presetCategory
-          ? { category: values.presetCategory }
-          : {}),
+        ...(values.presetCategory ? { category: values.presetCategory } : {}),
       };
 
       await onSubmit(updatedProvider);
diff --git a/src/components/providers/ProviderActions.tsx b/src/components/providers/ProviderActions.tsx
index 9e78666..5552b92 100644
--- a/src/components/providers/ProviderActions.tsx
+++ b/src/components/providers/ProviderActions.tsx
@@ -64,8 +64,9 @@ export function ProviderActions({
         onClick={onDelete}
         disabled={isCurrent}
         className={cn(
-          "text-destructive hover:text-destructive",
-          isCurrent && "text-muted-foreground hover:text-muted-foreground",
+          "hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10",
+          isCurrent &&
+            "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
         )}
       >
         <Trash2 className="h-4 w-4" />
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx
index 2ab0af3..86e99bb 100644
--- a/src/components/providers/ProviderCard.tsx
+++ b/src/components/providers/ProviderCard.tsx
@@ -117,7 +117,7 @@ export function ProviderCard({
                 {provider.name}
               </h3>
               {isCurrent && (
-                <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs font-medium text-green-500 dark:text-green-400">
                   {t("provider.currentlyUsing", { defaultValue: "当前使用" })}
                 </span>
               )}
diff --git a/src/components/providers/forms/ProviderForm.tsx b/src/components/providers/forms/ProviderForm.tsx
index a26f1f2..a4fd347 100644
--- a/src/components/providers/forms/ProviderForm.tsx
+++ b/src/components/providers/forms/ProviderForm.tsx
@@ -26,10 +26,7 @@ import JsonEditor from "@/components/JsonEditor";
 import { providerSchema, type ProviderFormData } from "@/lib/schemas/provider";
 import type { AppType } from "@/lib/api";
 import type { ProviderCategory } from "@/types";
-import {
-  providerPresets,
-  type ProviderPreset,
-} from "@/config/providerPresets";
+import { providerPresets, type ProviderPreset } from "@/config/providerPresets";
 import {
   codexProviderPresets,
   type CodexProviderPreset,
@@ -37,11 +34,7 @@ import {
 import { applyTemplateValues } from "@/utils/providerConfigUtils";
 
 const CLAUDE_DEFAULT_CONFIG = JSON.stringify({ env: {}, config: {} }, null, 2);
-const CODEX_DEFAULT_CONFIG = JSON.stringify(
-  { auth: {}, config: "" },
-  null,
-  2,
-);
+const CODEX_DEFAULT_CONFIG = JSON.stringify({ auth: {}, config: "" }, null, 2);
 
 type PresetEntry = {
   id: string;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0e8cc5d..c8e06b4 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,26 +4,35 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
+        // 主按钮：蓝底白字（对应旧版 primary）
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        // 危险按钮：红底白字（对应旧版 danger）
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700",
+        // 轮廓按钮
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-gray-200 bg-background hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
+        // 次按钮：灰色（对应旧版 secondary）
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+        // 幽灵按钮（对应旧版 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",
+        // 链接按钮
+        link: "text-blue-500 underline-offset-4 hover:underline dark:text-blue-400",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        icon: "h-9 w-9 p-1.5",
       },
     },
     defaultVariants: {
diff --git a/src/index.css b/src/index.css
index f87242c..b2a55c1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,79 @@
 /* 引入 Tailwind v4 内建样式与工具 */
 @import "tailwindcss";
 
-/* 覆盖 Tailwind v4 默认的 dark 变体为“类选择器”模式 */
+/* 覆盖 Tailwind v4 默认的 dark 变体为"类选择器"模式 */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* shadcn/ui 主题变量 - 蓝色主题 */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    /* 主色调：蓝色 (bg-blue-500) */
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+
+    /* 次要色：淡蓝灰 */
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    /* 强调色 */
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    /* 危险色：红色 */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    /* 边框和输入框 */
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 217 91% 60%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    /* 暗色模式主色调：稍深的蓝色 (bg-blue-600) */
+    --primary: 217 91% 55%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    /* 暗色模式危险色 */
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 217 91% 55%;
+  }
+}
+
 /* 全局基础样式 */
 * {
   box-sizing: border-box;
+  border-color: hsl(var(--border));
 }
 
 html {
@@ -17,7 +84,9 @@ html {
 }
 
 body {
-  @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm dark:bg-gray-950 dark:text-gray-100;
+  @apply m-0 p-0 text-sm;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
 /* 暗色模式下启用暗色原生控件/滚动条配色 */