From 3da5525c7945133594ecc52b48b1585f6fa13f48 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 20 Dec 2025 18:57:36 +0800
Subject: [PATCH] fix(ui): improve text visibility in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hardcoded gray color classes with semantic color classes
to fix poor text contrast in dark mode:

- MCP panel: server names, descriptions, tags, app labels
- Prompt panel: prompt names, descriptions, empty states
- Usage footer: timestamps, refresh buttons
- Update badge: close button icon
- API key input: disabled state text
- Env warning banner: source info text

Changes:
- `text-gray-400 dark:text-gray-500` → `text-muted-foreground`
  (fixes reversed dark mode logic)
- `text-gray-500 dark:text-gray-400` → `text-muted-foreground`
- `bg-gray-100 dark:bg-gray-800` → `bg-muted`
---
 src/components/UpdateBadge.tsx                |  2 +-
 src/components/UsageFooter.tsx                |  6 ++---
 src/components/env/EnvWarningBanner.tsx       |  2 +-
 src/components/mcp/UnifiedMcpPanel.tsx        | 22 +++++++++----------
 src/components/prompts/PromptListItem.tsx     |  4 ++--
 src/components/prompts/PromptPanel.tsx        | 10 ++++-----
 .../providers/forms/ApiKeyInput.tsx           |  2 +-
 7 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/UpdateBadge.tsx b/src/components/UpdateBadge.tsx
index 30d4d7adc..67244714e 100644
--- a/src/components/UpdateBadge.tsx
+++ b/src/components/UpdateBadge.tsx
@@ -56,7 +56,7 @@ export function UpdateBadge({ className = "", onClick }: UpdateBadgeProps) {
         "
         aria-label={t("common.close")}
       >
-        <X className="w-3 h-3 text-gray-400 dark:text-gray-500" />
+        <X className="w-3 h-3 text-muted-foreground" />
       </button>
     </div>
   );
diff --git a/src/components/UsageFooter.tsx b/src/components/UsageFooter.tsx
index f20600948..ca5b3d112 100644
--- a/src/components/UsageFooter.tsx
+++ b/src/components/UsageFooter.tsx
@@ -114,7 +114,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
         {/* 第一行：更新时间和刷新按钮 */}
         <div className="flex items-center gap-2 justify-end">
           {/* 上次查询时间 */}
-          <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
+          <span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
             <Clock size={10} />
             {lastQueriedAt
               ? formatRelativeTime(lastQueriedAt, now, t)
@@ -128,7 +128,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
               refetch();
             }}
             disabled={loading}
-            className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0 text-gray-400 dark:text-gray-500"
+            className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0 text-muted-foreground"
             title={t("usage.refreshUsage")}
           >
             <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
@@ -191,7 +191,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
         <div className="flex items-center gap-2">
           {/* 自动查询时间提示 */}
           {lastQueriedAt && (
-            <span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
+            <span className="text-[10px] text-muted-foreground/70 flex items-center gap-1">
               <Clock size={10} />
               {formatRelativeTime(lastQueriedAt, now, t)}
             </span>
diff --git a/src/components/env/EnvWarningBanner.tsx b/src/components/env/EnvWarningBanner.tsx
index 55c5621fa..20d4e8d76 100644
--- a/src/components/env/EnvWarningBanner.tsx
+++ b/src/components/env/EnvWarningBanner.tsx
@@ -198,7 +198,7 @@ export function EnvWarningBanner({
                             <p className="text-xs text-gray-600 dark:text-gray-400 mt-1 break-all">
                               {t("env.field.value")}: {conflict.varValue}
                             </p>
-                            <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                            <p className="text-xs text-muted-foreground mt-1">
                               {t("env.field.source")}:{" "}
                               {getSourceDescription(conflict)}
                             </p>
diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index 08f6c340b..9f765bbae 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -129,18 +129,18 @@ const UnifiedMcpPanel = React.forwardRef<
       {/* Content - Scrollable */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
         {isLoading ? (
-          <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <div className="text-center py-12 text-muted-foreground">
             {t("mcp.loading")}
           </div>
         ) : serverEntries.length === 0 ? (
           <div className="text-center py-12">
-            <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-              <Server size={24} className="text-gray-400 dark:text-gray-500" />
+            <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+              <Server size={24} className="text-muted-foreground" />
             </div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+            <h3 className="text-lg font-medium text-foreground mb-2">
               {t("mcp.unifiedPanel.noServers")}
             </h3>
-            <p className="text-gray-500 dark:text-gray-400 text-sm">
+            <p className="text-muted-foreground text-sm">
               {t("mcp.emptyDescription")}
             </p>
           </div>
@@ -237,7 +237,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
       {/* 左侧：服务器信息 */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100">
+          <h3 className="font-medium text-foreground">
             {name}
           </h3>
           {docsUrl && (
@@ -253,12 +253,12 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
           )}
         </div>
         {description && (
-          <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+          <p className="text-sm text-muted-foreground line-clamp-2">
             {description}
           </p>
         )}
         {!description && tags && tags.length > 0 && (
-          <p className="text-xs text-gray-400 dark:text-gray-500 truncate">
+          <p className="text-xs text-muted-foreground/70 truncate">
             {tags.join(", ")}
           </p>
         )}
@@ -269,7 +269,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
         <div className="flex items-center justify-between gap-3">
           <label
             htmlFor={`${id}-claude`}
-            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+            className="text-sm text-foreground/80 cursor-pointer"
           >
             {t("mcp.unifiedPanel.apps.claude")}
           </label>
@@ -285,7 +285,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
         <div className="flex items-center justify-between gap-3">
           <label
             htmlFor={`${id}-codex`}
-            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+            className="text-sm text-foreground/80 cursor-pointer"
           >
             {t("mcp.unifiedPanel.apps.codex")}
           </label>
@@ -301,7 +301,7 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
         <div className="flex items-center justify-between gap-3">
           <label
             htmlFor={`${id}-gemini`}
-            className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
+            className="text-sm text-foreground/80 cursor-pointer"
           >
             {t("mcp.unifiedPanel.apps.gemini")}
           </label>
diff --git a/src/components/prompts/PromptListItem.tsx b/src/components/prompts/PromptListItem.tsx
index 1ba298bc4..36e1186a0 100644
--- a/src/components/prompts/PromptListItem.tsx
+++ b/src/components/prompts/PromptListItem.tsx
@@ -36,11 +36,11 @@ const PromptListItem: React.FC<PromptListItemProps> = ({
         </div>
 
         <div className="flex-1 min-w-0">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
+          <h3 className="font-medium text-foreground mb-1">
             {prompt.name}
           </h3>
           {prompt.description && (
-            <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+            <p className="text-sm text-muted-foreground truncate">
               {prompt.description}
             </p>
           )}
diff --git a/src/components/prompts/PromptPanel.tsx b/src/components/prompts/PromptPanel.tsx
index 12b9b2b95..88822b3ac 100644
--- a/src/components/prompts/PromptPanel.tsx
+++ b/src/components/prompts/PromptPanel.tsx
@@ -108,21 +108,21 @@ const PromptPanel = React.forwardRef<PromptPanelHandle, PromptPanelProps>(
 
         <div className="flex-1 overflow-y-auto pb-16">
           {loading ? (
-            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+            <div className="text-center py-12 text-muted-foreground">
               {t("prompts.loading")}
             </div>
           ) : promptEntries.length === 0 ? (
             <div className="text-center py-12">
-              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
+              <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
                 <FileText
                   size={24}
-                  className="text-gray-400 dark:text-gray-500"
+                  className="text-muted-foreground"
                 />
               </div>
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+              <h3 className="text-lg font-medium text-foreground mb-2">
                 {t("prompts.empty")}
               </h3>
-              <p className="text-gray-500 dark:text-gray-400 text-sm">
+              <p className="text-muted-foreground text-sm">
                 {t("prompts.emptyDescription")}
               </p>
             </div>
diff --git a/src/components/providers/forms/ApiKeyInput.tsx b/src/components/providers/forms/ApiKeyInput.tsx
index 87939e287..0c4a1ef77 100644
--- a/src/components/providers/forms/ApiKeyInput.tsx
+++ b/src/components/providers/forms/ApiKeyInput.tsx
@@ -30,7 +30,7 @@ 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 dark:bg-gray-800 border-border-default text-gray-400 dark:text-gray-500 cursor-not-allowed"
+      ? "bg-muted border-border-default text-muted-foreground cursor-not-allowed"
       : "border-border-default 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"
   }`;