diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 60bd4fc..e78c8e9 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -13,14 +13,14 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
   };
 
   return (
-    <div className="inline-flex bg-gray-100 rounded-lg p-1 gap-1">
+    <div className="inline-flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 gap-1 border border-transparent dark:border-gray-700">
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
-            ? "bg-white text-gray-900 shadow-sm"
-            : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
+            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
+            : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
         }`}
       >
         <Code2 size={16} />
@@ -32,8 +32,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         onClick={() => handleSwitch("codex")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "codex"
-            ? "bg-white text-gray-900 shadow-sm"
-            : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
+            ? "bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100 dark:shadow-none"
+            : "text-gray-500 hover:text-gray-900 hover:bg-white/50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800/60"
         }`}
       >
         <Terminal size={16} />
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index a1bf19f..e2a1c0c 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -31,20 +31,20 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       />
 
       {/* Dialog */}
-      <div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
+      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+            <div className="w-10 h-10 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center">
               <AlertTriangle size={20} className="text-red-500" />
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
               {title}
             </h3>
           </div>
           <button
             onClick={onCancel}
-            className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+            className="p-1 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 rounded-md transition-colors"
           >
             <X size={18} />
           </button>
@@ -52,16 +52,16 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-gray-500 leading-relaxed">
+          <p className="text-gray-500 dark:text-gray-400 leading-relaxed">
             {message}
           </p>
         </div>
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-900">
           <button
             onClick={onCancel}
-            className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-md transition-colors"
+            className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
             autoFocus
           >
             {cancelText}
diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index 6f94313..304420d 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -73,10 +73,10 @@ const ProviderList: React.FC<ProviderListProps> = ({
           <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
             <Users size={24} className="text-gray-400" />
           </div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
             还没有添加任何供应商
           </h3>
-          <p className="text-gray-500 text-sm">
+          <p className="text-gray-500 dark:text-gray-400 text-sm">
             点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
           </p>
         </div>
@@ -96,7 +96,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-3 mb-2">
-                      <h3 className="font-medium text-gray-900">
+                      <h3 className="font-medium text-gray-900 dark:text-gray-100">
                         {provider.name}
                       </h3>
                       {isCurrent && (
@@ -114,14 +114,14 @@ const ProviderList: React.FC<ProviderListProps> = ({
                             e.preventDefault();
                             handleUrlClick(provider.websiteUrl!);
                           }}
-                          className="inline-flex items-center gap-1 text-blue-500 hover:opacity-90 transition-colors"
+                          className="inline-flex items-center gap-1 text-blue-500 dark:text-blue-400 hover:opacity-90 transition-colors"
                           title={`访问 ${provider.websiteUrl}`}
                         >
                           {provider.websiteUrl}
                         </button>
                       ) : (
                         <span
-                          className="text-gray-500"
+                          className="text-gray-500 dark:text-gray-400"
                           title={apiUrl}
                         >
                           {apiUrl}
@@ -137,8 +137,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
                       className={cn(
                         "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
                         isCurrent
-                          ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                          : "bg-blue-500 text-white hover:bg-blue-600"
+                          ? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500 cursor-not-allowed"
+                          : "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
                       )}
                     >
                       <Play size={14} />
@@ -160,7 +160,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
                         buttonStyles.icon,
                         isCurrent
                           ? "text-gray-400 cursor-not-allowed"
-                          : "text-gray-500 hover:text-red-500 hover:bg-red-100"
+                          : "text-gray-500 hover:text-red-500 hover:bg-red-100 dark:text-gray-400 dark:hover:text-red-400 dark:hover:bg-red-500/10"
                       )}
                       title="删除供应商"
                     >
diff --git a/src/index.css b/src/index.css
index 08186b1..f49d0d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,12 +12,17 @@
 html {
   @apply font-sans antialiased;
   line-height: 1.5;
+  /* 让原生控件与滚动条随主题切换配色 */
+  color-scheme: light;
 }
 
 body {
   @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm dark:bg-gray-950 dark:text-gray-100;
 }
 
+/* 暗色模式下启用暗色原生控件/滚动条配色 */
+html.dark { color-scheme: dark; }
+
 /* 滚动条样式 */
 ::-webkit-scrollbar {
   @apply w-1.5 h-1.5;