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

feat(ui): enhance dark mode styling support

Browse Source 
- AppSwitcher: add dark mode backgrounds, borders and hover effects
- ConfirmDialog: apply dark theme colors to dialog elements
- ProviderList: update list items and buttons for dark mode
- Global styles: use color-scheme property for native controls theming

Ensures all interactive components have proper visual feedback and consistent UX in dark mode.
This commit is contained in:
Jason
2025-09-08 15:57:29 +08:00
parent c0d9d0296d
commit df7d818514
4 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/AppSwitcher.tsx
View File

@@ -13,14 +13,14 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
}; };
return ( 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 <button
type="button" type="button"
onClick={() => handleSwitch("claude")} onClick={() => handleSwitch("claude")}
className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${ className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
activeApp === "claude" activeApp === "claude"
? "bg-white text-gray-900 shadow-sm" ? "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" : "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} /> <Code2 size={16} />
@@ -32,8 +32,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
onClick={() => handleSwitch("codex")} onClick={() => handleSwitch("codex")}
className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${ className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
activeApp === "codex" activeApp === "codex"
? "bg-white text-gray-900 shadow-sm" ? "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" : "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} /> <Terminal size={16} />

16
src/components/ConfirmDialog.tsx
View File

@@ -31,20 +31,20 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
/> />
{/* Dialog */} {/* 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 */} {/* 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="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" /> <AlertTriangle size={20} className="text-red-500" />
</div> </div>
<h3 className="text-lg font-semibold text-gray-900"> <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
{title} {title}
</h3> </h3>
</div> </div>
<button <button
onClick={onCancel} 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} /> <X size={18} />
</button> </button>
@@ -52,16 +52,16 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
{/* Content */} {/* Content */}
<div className="p-6"> <div className="p-6">
<p className="text-gray-500 leading-relaxed"> <p className="text-gray-500 dark:text-gray-400 leading-relaxed">
{message} {message}
</p> </p>
</div> </div>
{/* Actions */} {/* 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 <button
onClick={onCancel} 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 autoFocus
> >
{cancelText} {cancelText}

16
src/components/ProviderList.tsx
View File

@@ -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"> <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" /> <Users size={24} className="text-gray-400" />
</div> </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> </h3>
<p className="text-gray-500 text-sm"> <p className="text-gray-500 dark:text-gray-400 text-sm">
点击右上角的"添加供应商"按钮开始配置您的第一个API供应商 点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
</p> </p>
</div> </div>
@@ -96,7 +96,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-3 mb-2"> <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} {provider.name}
</h3> </h3>
{isCurrent && ( {isCurrent && (
@@ -114,14 +114,14 @@ const ProviderList: React.FC<ProviderListProps> = ({
e.preventDefault(); e.preventDefault();
handleUrlClick(provider.websiteUrl!); 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}`} title={`访问 ${provider.websiteUrl}`}
> >
{provider.websiteUrl} {provider.websiteUrl}
</button> </button>
) : ( ) : (
<span <span
className="text-gray-500" className="text-gray-500 dark:text-gray-400"
title={apiUrl} title={apiUrl}
> >
{apiUrl} {apiUrl}
@@ -137,8 +137,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
className={cn( className={cn(
"inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors", "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
isCurrent isCurrent
? "bg-gray-100 text-gray-400 cursor-not-allowed" ? "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" : "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
)} )}
> >
<Play size={14} /> <Play size={14} />
@@ -160,7 +160,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
buttonStyles.icon, buttonStyles.icon,
isCurrent isCurrent
? "text-gray-400 cursor-not-allowed" ? "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="删除供应商" title="删除供应商"
> >

5
src/index.css
View File

@@ -12,12 +12,17 @@
html { html {
@apply font-sans antialiased; @apply font-sans antialiased;
line-height: 1.5; line-height: 1.5;
/* 让原生控件与滚动条随主题切换配色 */
color-scheme: light;
} }
body { body {
@apply m-0 p-0 bg-gray-50 text-gray-900 text-sm dark:bg-gray-950 dark:text-gray-100; @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 { ::-webkit-scrollbar {
@apply w-1.5 h-1.5; @apply w-1.5 h-1.5;