admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): add dark mode support for provider modals

Browse Source 
- 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.
This commit is contained in:
Jason
2025-09-13 21:45:34 +08:00
parent 0d2dedbb6d
commit 85ba24f1c3
5 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ProviderForm/CodexConfigEditor.tsx
View File

@@ -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>
);