fix(ui): add dark mode support for Kimi model selector

- Update select dropdown with dark mode background and text colors
- Add dark mode styles to labels and refresh button
- Apply dark mode colors to error messages (red theme)
- Ensure hint box uses consistent amber theme in dark mode
- Fix chevron icon visibility in dark mode

This ensures the Kimi provider configuration UI is properly visible
and maintains consistency with other provider modals in dark mode.
This commit is contained in:
Jason
2025-09-13 21:48:18 +08:00
parent 85ba24f1c3
commit 7ccef5f385

View File

@@ -86,10 +86,10 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
}
}, [debouncedKey]);
const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white ${
const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white dark:bg-gray-800 ${
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: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"
}`;
const ModelSelect: React.FC<{
@@ -98,7 +98,9 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
onChange: (value: string) => void;
}> = ({ label, value, onChange }) => (
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-900">{label}</label>
<label className="block text-sm font-medium text-gray-900 dark:text-gray-100">
{label}
</label>
<div className="relative">
<select
value={value}
@@ -121,7 +123,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</select>
<ChevronDown
size={16}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 pointer-events-none"
/>
</div>
</div>
@@ -130,12 +132,14 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-900"></h3>
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
</h3>
<button
type="button"
onClick={() => debouncedKey && fetchModelsWithKey(debouncedKey)}
disabled={disabled || loading || !debouncedKey}
className="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
@@ -143,9 +147,12 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div>
{error && (
<div className="flex items-center gap-2 p-3 bg-red-100 border border-red-500/20 rounded-lg">
<AlertCircle size={16} className="text-red-500 flex-shrink-0" />
<p className="text-red-500 text-xs">{error}</p>
<div className="flex items-center gap-2 p-3 bg-red-100 dark:bg-red-900/20 border border-red-500/20 dark:border-red-500/30 rounded-lg">
<AlertCircle
size={16}
className="text-red-500 dark:text-red-400 flex-shrink-0"
/>
<p className="text-red-500 dark:text-red-400 text-xs">{error}</p>
</div>
)}
@@ -165,8 +172,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
</div>
{!apiKey.trim() && (
<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">
💡 API Key
</p>
</div>