From 85ba24f1c3132741e640df18b0e7f64b903961f3 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 13 Sep 2025 21:45:34 +0800
Subject: [PATCH] fix(ui): add dark mode support for provider modals

- Add dark mode styles to ProviderForm modal (background, borders, text)
- Update ApiKeyInput component with dark mode colors
- Add dark mode detection to ClaudeConfigEditor for JSON editor
- Apply dark mode styles to CodexConfigEditor textareas
- Update PresetSelector buttons for dark mode
- Ensure consistent amber color scheme for all hint boxes in dark mode

This ensures proper visibility and readability of add/edit provider dialogs
when dark mode is enabled.
---
 src/components/ProviderForm.tsx               | 61 +++++++++++--------
 src/components/ProviderForm/ApiKeyInput.tsx   | 11 ++--
 .../ProviderForm/ClaudeConfigEditor.tsx       | 37 +++++++++--
 .../ProviderForm/CodexConfigEditor.tsx        | 16 +++--
 .../ProviderForm/PresetSelector.tsx           | 13 ++--
 5 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index 5cea1a5..bdddf6e 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -646,17 +646,19 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
       }}
     >
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" />
 
       {/* Modal */}
-      <div className="relative bg-white rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
+      <div className="relative bg-white dark:bg-gray-900 rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-gray-200">
-          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-800">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            {title}
+          </h2>
           <button
             type="button"
             onClick={onClose}
-            className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+            className="p-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
             aria-label="关闭"
           >
             <X size={18} />
@@ -666,9 +668,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
         <form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
           <div className="flex-1 overflow-auto p-6 space-y-6">
             {error && (
-              <div className="flex items-center gap-3 p-4 bg-red-100 border border-red-500/20 rounded-lg">
-                <AlertCircle size={20} className="text-red-500 flex-shrink-0" />
-                <p className="text-red-500 text-sm font-medium">{error}</p>
+              <div className="flex items-center gap-3 p-4 bg-red-100 dark:bg-red-900/20 border border-red-500/20 dark:border-red-500/30 rounded-lg">
+                <AlertCircle
+                  size={20}
+                  className="text-red-500 dark:text-red-400 flex-shrink-0"
+                />
+                <p className="text-red-500 dark:text-red-400 text-sm font-medium">
+                  {error}
+                </p>
               </div>
             )}
 
@@ -697,7 +704,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="name"
-                className="block text-sm font-medium text-gray-900"
+                className="block text-sm font-medium text-gray-900 dark:text-gray-100"
               >
                 供应商名称 *
               </label>
@@ -710,14 +717,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 placeholder="例如：Anthropic 官方"
                 required
                 autoComplete="off"
-                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors"
               />
             </div>
 
             <div className="space-y-2">
               <label
                 htmlFor="websiteUrl"
-                className="block text-sm font-medium text-gray-900"
+                className="block text-sm font-medium text-gray-900 dark:text-gray-100"
               >
                 官网地址
               </label>
@@ -729,7 +736,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 onChange={handleChange}
                 placeholder="https://example.com（可选）"
                 autoComplete="off"
-                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors"
               />
             </div>
 
@@ -754,7 +761,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                       href={getCurrentWebsiteUrl()}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-xs text-blue-400 hover:text-blue-500 transition-colors"
+                      className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
                     >
                       获取 API Key
                     </a>
@@ -768,7 +775,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
               <div className="space-y-2">
                 <label
                   htmlFor="baseUrl"
-                  className="block text-sm font-medium text-gray-900"
+                  className="block text-sm font-medium text-gray-900 dark:text-gray-100"
                 >
                   请求地址
                 </label>
@@ -779,10 +786,10 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   onChange={(e) => handleBaseUrlChange(e.target.value)}
                   placeholder="https://your-api-endpoint.com"
                   autoComplete="off"
-                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                  className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors"
                 />
-                <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
-                  <p className="text-xs text-amber-600">
+                <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">
                     💡 填写兼容 Claude API 的服务端点地址
                   </p>
                 </div>
@@ -824,7 +831,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                       href={getCurrentCodexWebsiteUrl()}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-xs text-blue-400 hover:text-blue-500 transition-colors"
+                      className="text-xs text-blue-400 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
                     >
                       获取 API Key
                     </a>
@@ -862,7 +869,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                       <div className="space-y-2">
                         <label
                           htmlFor="anthropicModel"
-                          className="block text-sm font-medium text-gray-900"
+                          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
                         >
                           主模型 (可选)
                         </label>
@@ -875,14 +882,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                           }
                           placeholder="例如: GLM-4.5"
                           autoComplete="off"
-                          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                          className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors"
                         />
                       </div>
 
                       <div className="space-y-2">
                         <label
                           htmlFor="anthropicSmallFastModel"
-                          className="block text-sm font-medium text-gray-900"
+                          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
                         >
                           快速模型 (可选)
                         </label>
@@ -898,13 +905,13 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                           }
                           placeholder="例如: GLM-4.5-Air"
                           autoComplete="off"
-                          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                          className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors"
                         />
                       </div>
                     </div>
 
-                    <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
-                      <p className="text-xs text-amber-600">
+                    <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">
                         💡 留空将使用供应商的默认模型
                       </p>
                     </div>
@@ -926,17 +933,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
           </div>
 
           {/* Footer */}
-          <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-800">
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg transition-colors"
+              className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
             >
               取消
             </button>
             <button
               type="submit"
-              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium flex items-center gap-2"
+              className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
             >
               <Save className="w-4 h-4" />
               {submitText}
diff --git a/src/components/ProviderForm/ApiKeyInput.tsx b/src/components/ProviderForm/ApiKeyInput.tsx
index 1967238..61545c2 100644
--- a/src/components/ProviderForm/ApiKeyInput.tsx
+++ b/src/components/ProviderForm/ApiKeyInput.tsx
@@ -28,13 +28,16 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
 
   const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
     disabled
-      ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
-      : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
+      ? "bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed"
+      : "border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400"
   }`;
 
   return (
     <div className="space-y-2">
-      <label htmlFor={id} className="block text-sm font-medium text-gray-900">
+      <label
+        htmlFor={id}
+        className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+      >
         {label} {required && "*"}
       </label>
       <div className="relative">
@@ -53,7 +56,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
           <button
             type="button"
             onClick={toggleShowKey}
-            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-900 transition-colors"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
             aria-label={showKey ? "隐藏API Key" : "显示API Key"}
           >
             {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
diff --git a/src/components/ProviderForm/ClaudeConfigEditor.tsx b/src/components/ProviderForm/ClaudeConfigEditor.tsx
index 6b16415..2545ed2 100644
--- a/src/components/ProviderForm/ClaudeConfigEditor.tsx
+++ b/src/components/ProviderForm/ClaudeConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import JsonEditor from "../JsonEditor";
 
 interface ClaudeConfigEditorProps {
@@ -14,21 +14,47 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
   disableCoAuthored,
   onCoAuthoredToggle,
 }) => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // 检测暗色模式
+    const checkDarkMode = () => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    };
+
+    checkDarkMode();
+
+    // 监听暗色模式变化
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "class") {
+          checkDarkMode();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
         <label
           htmlFor="settingsConfig"
-          className="block text-sm font-medium text-gray-900"
+          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
         >
           Claude Code 配置 (JSON) *
         </label>
-        <label className="inline-flex items-center gap-2 text-sm text-gray-500 cursor-pointer">
+        <label className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
           <input
             type="checkbox"
             checked={disableCoAuthored}
             onChange={(e) => onCoAuthoredToggle(e.target.checked)}
-            className="w-4 h-4 text-blue-500 bg-white border-gray-200 rounded focus:ring-blue-500 focus:ring-2"
+            className="w-4 h-4 text-blue-500 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 rounded focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-2"
           />
           禁止 Claude Code 签名
         </label>
@@ -36,6 +62,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
       <JsonEditor
         value={value}
         onChange={onChange}
+        darkMode={isDarkMode}
         placeholder={`{
   "env": {
     "ANTHROPIC_BASE_URL": "https://your-api-endpoint.com",
@@ -44,7 +71,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
 }`}
         rows={12}
       />
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-gray-500 dark:text-gray-400">
         完整的 Claude Code settings.json 配置内容
       </p>
     </div>
diff --git a/src/components/ProviderForm/CodexConfigEditor.tsx b/src/components/ProviderForm/CodexConfigEditor.tsx
index 715a594..766ea37 100644
--- a/src/components/ProviderForm/CodexConfigEditor.tsx
+++ b/src/components/ProviderForm/CodexConfigEditor.tsx
@@ -20,7 +20,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       <div className="space-y-2">
         <label
           htmlFor="codexAuth"
-          className="block text-sm font-medium text-gray-900"
+          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
         >
           auth.json (JSON) *
         </label>
@@ -34,15 +34,17 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
 }`}
           rows={6}
           required
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[8rem]"
+          className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors resize-y min-h-[8rem]"
         />
-        <p className="text-xs text-gray-500">Codex auth.json 配置内容</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          Codex auth.json 配置内容
+        </p>
       </div>
 
       <div className="space-y-2">
         <label
           htmlFor="codexConfig"
-          className="block text-sm font-medium text-gray-900"
+          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
         >
           config.toml (TOML)
         </label>
@@ -52,9 +54,11 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
           onChange={(e) => onConfigChange(e.target.value)}
           placeholder=""
           rows={8}
-          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[10rem]"
+          className="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-blue-500 dark:focus:border-blue-400 transition-colors resize-y min-h-[10rem]"
         />
-        <p className="text-xs text-gray-500">Codex config.toml 配置内容</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          Codex config.toml 配置内容
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/ProviderForm/PresetSelector.tsx b/src/components/ProviderForm/PresetSelector.tsx
index 1d02c93..de3389b 100644
--- a/src/components/ProviderForm/PresetSelector.tsx
+++ b/src/components/ProviderForm/PresetSelector.tsx
@@ -26,10 +26,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
   onCustomClick,
   customLabel = "自定义",
 }) => {
-  const getButtonClass = (
-    index: number,
-    preset?: Preset,
-  ) => {
+  const getButtonClass = (index: number, preset?: Preset) => {
     const isSelected = selectedIndex === index;
     const baseClass =
       "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors";
@@ -46,7 +43,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
       return `${baseClass} bg-blue-500 text-white`;
     }
 
-    return `${baseClass} bg-gray-100 text-gray-500 hover:bg-gray-200`;
+    return `${baseClass} bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700`;
   };
 
   const getDescription = () => {
@@ -67,7 +64,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
   return (
     <div className="space-y-4">
       <div>
-        <label className="block text-sm font-medium text-gray-900 mb-3">
+        <label className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
           {title}
         </label>
         <div className="flex flex-wrap gap-2">
@@ -102,7 +99,9 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
         </div>
       </div>
       {getDescription() && (
-        <p className="text-sm text-gray-500">{getDescription()}</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {getDescription()}
+        </p>
       )}
     </div>
   );