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

11
src/components/ProviderForm/ApiKeyInput.tsx
View File

@@ -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} />}

37
src/components/ProviderForm/ClaudeConfigEditor.tsx
View File

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

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

13
src/components/ProviderForm/PresetSelector.tsx
View File

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