From bb2756d0fb65a3e399285d3d97501f4ae7e4548b Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 25 Dec 2025 16:57:41 +0800
Subject: [PATCH] fix(ui): improve dark mode text contrast for form labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hardcoded Tailwind color classes with design system CSS variables
to improve text visibility in dark mode:

- text-gray-900 dark:text-gray-100 → text-foreground
- text-gray-500/600 dark:text-gray-400 → text-muted-foreground
- bg-white dark:bg-gray-800 → bg-background
---
 src/components/env/EnvWarningBanner.tsx       |  4 +--
 src/components/mcp/McpWizardModal.tsx         | 30 +++++++++----------
 .../providers/forms/ApiKeyInput.tsx           |  6 ++--
 .../providers/forms/CodexConfigSections.tsx   | 10 +++----
 .../providers/forms/CodexFormFields.tsx       |  6 ++--
 .../providers/forms/GeminiConfigSections.tsx  | 10 +++----
 .../providers/forms/shared/EndpointField.tsx  |  2 +-
 src/components/skills/SkillsPage.tsx          |  8 ++---
 8 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/env/EnvWarningBanner.tsx b/src/components/env/EnvWarningBanner.tsx
index 20d4e8d76..da31ce929 100644
--- a/src/components/env/EnvWarningBanner.tsx
+++ b/src/components/env/EnvWarningBanner.tsx
@@ -191,11 +191,11 @@ export function EnvWarningBanner({
                           <div className="flex-1 min-w-0">
                             <label
                               htmlFor={key}
-                              className="block text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
+                              className="block text-sm font-medium text-foreground cursor-pointer"
                             >
                               {conflict.varName}
                             </label>
-                            <p className="text-xs text-gray-600 dark:text-gray-400 mt-1 break-all">
+                            <p className="text-xs text-muted-foreground mt-1 break-all">
                               {t("env.field.value")}: {conflict.varValue}
                             </p>
                             <p className="text-xs text-muted-foreground mt-1">
diff --git a/src/components/mcp/McpWizardModal.tsx b/src/components/mcp/McpWizardModal.tsx
index fe4336f7f..a5cf5de2c 100644
--- a/src/components/mcp/McpWizardModal.tsx
+++ b/src/components/mcp/McpWizardModal.tsx
@@ -239,7 +239,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
         <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
           {/* Hint */}
           <div className="rounded-lg border border-border-default bg-gray-100/50 dark:bg-gray-800/50 p-3">
-            <p className="text-sm text-gray-500 dark:text-gray-400">
+            <p className="text-sm text-muted-foreground">
               {t("mcp.wizard.hint")}
             </p>
           </div>
@@ -248,7 +248,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
           <div className="space-y-4 min-h-[400px]">
             {/* Type */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 {t("mcp.wizard.type")} <span className="text-red-500">*</span>
               </label>
               <div className="flex gap-4">
@@ -262,7 +262,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     }
                     className="w-4 h-4 accent-blue-500"
                   />
-                  <span className="text-sm text-gray-900 dark:text-gray-100">
+                  <span className="text-sm text-foreground">
                     {t("mcp.wizard.typeStdio")}
                   </span>
                 </label>
@@ -276,7 +276,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     }
                     className="w-4 h-4 accent-blue-500"
                   />
-                  <span className="text-sm text-gray-900 dark:text-gray-100">
+                  <span className="text-sm text-foreground">
                     {t("mcp.wizard.typeHttp")}
                   </span>
                 </label>
@@ -290,7 +290,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     }
                     className="w-4 h-4 accent-blue-500"
                   />
-                  <span className="text-sm text-gray-900 dark:text-gray-100">
+                  <span className="text-sm text-foreground">
                     {t("mcp.wizard.typeSse")}
                   </span>
                 </label>
@@ -299,7 +299,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
 
             {/* Title */}
             <div>
-              <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+              <label className="mb-1 block text-sm font-medium text-foreground">
                 {t("mcp.form.title")} <span className="text-red-500">*</span>
               </label>
               <Input
@@ -317,7 +317,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
               <>
                 {/* Command */}
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.command")}{" "}
                     <span className="text-red-500">*</span>
                   </label>
@@ -333,7 +333,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
 
                 {/* Args */}
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.args")}
                   </label>
                   <textarea
@@ -341,13 +341,13 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardArgs(e.target.value)}
                     placeholder={t("mcp.wizard.argsPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-white dark:bg-gray-800 px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
                   />
                 </div>
 
                 {/* Env */}
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.env")}
                   </label>
                   <textarea
@@ -355,7 +355,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardEnv(e.target.value)}
                     placeholder={t("mcp.wizard.envPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-white dark:bg-gray-800 px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
                   />
                 </div>
               </>
@@ -366,7 +366,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
               <>
                 {/* URL */}
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.url")}{" "}
                     <span className="text-red-500">*</span>
                   </label>
@@ -382,7 +382,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
 
                 {/* Headers */}
                 <div>
-                  <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <label className="mb-1 block text-sm font-medium text-foreground">
                     {t("mcp.wizard.headers")}
                   </label>
                   <textarea
@@ -390,7 +390,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
                     onChange={(e) => setWizardHeaders(e.target.value)}
                     placeholder={t("mcp.wizard.headersPlaceholder")}
                     rows={3}
-                    className="w-full rounded-md border border-border-default bg-white dark:bg-gray-800 px-3 py-2 text-sm font-mono text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
+                    className="w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 resize-y"
                   />
                 </div>
               </>
@@ -404,7 +404,7 @@ const McpWizardModal: React.FC<McpWizardModalProps> = ({
             wizardUrl ||
             wizardHeaders) && (
             <div className="space-y-2 border-t border-border-default pt-4">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              <h3 className="text-sm font-medium text-foreground">
                 {t("mcp.wizard.preview")}
               </h3>
               <pre className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800 p-3 text-xs font-mono text-gray-700 dark:text-gray-300">
diff --git a/src/components/providers/forms/ApiKeyInput.tsx b/src/components/providers/forms/ApiKeyInput.tsx
index 0c4a1ef77..06a2982a3 100644
--- a/src/components/providers/forms/ApiKeyInput.tsx
+++ b/src/components/providers/forms/ApiKeyInput.tsx
@@ -31,14 +31,14 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
   const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
     disabled
       ? "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"
+      : "border-border-default bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20"
   }`;
 
   return (
     <div className="space-y-2">
       <label
         htmlFor={id}
-        className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+        className="block text-sm font-medium text-foreground"
       >
         {label} {required && "*"}
       </label>
@@ -58,7 +58,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 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors"
             aria-label={showKey ? t("apiKeyInput.hide") : t("apiKeyInput.show")}
           >
             {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
diff --git a/src/components/providers/forms/CodexConfigSections.tsx b/src/components/providers/forms/CodexConfigSections.tsx
index 6eaa9c3a1..99ada4273 100644
--- a/src/components/providers/forms/CodexConfigSections.tsx
+++ b/src/components/providers/forms/CodexConfigSections.tsx
@@ -47,7 +47,7 @@ export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
     <div className="space-y-2">
       <label
         htmlFor="codexAuth"
-        className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+        className="block text-sm font-medium text-foreground"
       >
         {t("codexConfig.authJson")}
       </label>
@@ -67,7 +67,7 @@ export const CodexAuthSection: React.FC<CodexAuthSectionProps> = ({
       )}
 
       {!error && (
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs text-muted-foreground">
           {t("codexConfig.authJsonHint")}
         </p>
       )}
@@ -120,12 +120,12 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
       <div className="flex items-center justify-between">
         <label
           htmlFor="codexConfig"
-          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+          className="block text-sm font-medium text-foreground"
         >
           {t("codexConfig.configToml")}
         </label>
 
-        <label className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
+        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
           <input
             type="checkbox"
             checked={useCommonConfig}
@@ -167,7 +167,7 @@ export const CodexConfigSection: React.FC<CodexConfigSectionProps> = ({
       )}
 
       {!configError && (
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs text-muted-foreground">
           {t("codexConfig.configTomlHint")}
         </p>
       )}
diff --git a/src/components/providers/forms/CodexFormFields.tsx b/src/components/providers/forms/CodexFormFields.tsx
index fefe41c3a..f8cada485 100644
--- a/src/components/providers/forms/CodexFormFields.tsx
+++ b/src/components/providers/forms/CodexFormFields.tsx
@@ -98,7 +98,7 @@ export function CodexFormFields({
         <div className="space-y-2">
           <label
             htmlFor="codexModelName"
-            className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+            className="block text-sm font-medium text-foreground"
           >
             {t("codexConfig.modelName", { defaultValue: "模型名称" })}
           </label>
@@ -110,9 +110,9 @@ export function CodexFormFields({
             placeholder={t("codexConfig.modelNamePlaceholder", {
               defaultValue: "例如: gpt-5-codex",
             })}
-            className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
+            className="w-full px-3 py-2 border border-border-default bg-background text-foreground rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
           />
-          <p className="text-xs text-gray-500 dark:text-gray-400">
+          <p className="text-xs text-muted-foreground">
             {t("codexConfig.modelNameHint", {
               defaultValue: "指定使用的模型，将自动更新到 config.toml 中",
             })}
diff --git a/src/components/providers/forms/GeminiConfigSections.tsx b/src/components/providers/forms/GeminiConfigSections.tsx
index 9eb948343..09132e282 100644
--- a/src/components/providers/forms/GeminiConfigSections.tsx
+++ b/src/components/providers/forms/GeminiConfigSections.tsx
@@ -47,7 +47,7 @@ export const GeminiEnvSection: React.FC<GeminiEnvSectionProps> = ({
     <div className="space-y-2">
       <label
         htmlFor="geminiEnv"
-        className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+        className="block text-sm font-medium text-foreground"
       >
         {t("geminiConfig.envFile", { defaultValue: "环境变量 (.env)" })}
       </label>
@@ -69,7 +69,7 @@ GEMINI_MODEL=gemini-3-pro-preview`}
       )}
 
       {!error && (
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs text-muted-foreground">
           {t("geminiConfig.envFileHint", {
             defaultValue: "使用 .env 格式配置 Gemini 环境变量",
           })}
@@ -124,14 +124,14 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
       <div className="flex items-center justify-between">
         <label
           htmlFor="geminiConfig"
-          className="block text-sm font-medium text-gray-900 dark:text-gray-100"
+          className="block text-sm font-medium text-foreground"
         >
           {t("geminiConfig.configJson", {
             defaultValue: "配置文件 (config.json)",
           })}
         </label>
 
-        <label className="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer">
+        <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
           <input
             type="checkbox"
             checked={useCommonConfig}
@@ -180,7 +180,7 @@ export const GeminiConfigSection: React.FC<GeminiConfigSectionProps> = ({
       )}
 
       {!configError && (
-        <p className="text-xs text-gray-500 dark:text-gray-400">
+        <p className="text-xs text-muted-foreground">
           {t("geminiConfig.configJsonHint", {
             defaultValue: "使用 JSON 格式配置 Gemini 扩展参数（可选）",
           })}
diff --git a/src/components/providers/forms/shared/EndpointField.tsx b/src/components/providers/forms/shared/EndpointField.tsx
index 19dbcab1b..e8e8b977b 100644
--- a/src/components/providers/forms/shared/EndpointField.tsx
+++ b/src/components/providers/forms/shared/EndpointField.tsx
@@ -40,7 +40,7 @@ export function EndpointField({
           <button
             type="button"
             onClick={onManageClick}
-            className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
           >
             <Zap className="h-3.5 w-3.5" />
             {manageButtonLabel || defaultManageLabel}
diff --git a/src/components/skills/SkillsPage.tsx b/src/components/skills/SkillsPage.tsx
index 2566c92bf..2b199bc10 100644
--- a/src/components/skills/SkillsPage.tsx
+++ b/src/components/skills/SkillsPage.tsx
@@ -231,10 +231,10 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
               </div>
             ) : skills.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-64 text-center">
-                <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
+                <p className="text-lg font-medium text-foreground">
                   {t("skills.empty")}
                 </p>
-                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                <p className="mt-2 text-sm text-muted-foreground">
                   {t("skills.emptyDescription")}
                 </p>
                 <Button
@@ -306,10 +306,10 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
                 {/* 技能列表或无结果提示 */}
                 {filteredSkills.length === 0 ? (
                   <div className="flex flex-col items-center justify-center h-48 text-center">
-                    <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
+                    <p className="text-lg font-medium text-foreground">
                       {t("skills.noResults")}
                     </p>
-                    <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                    <p className="mt-2 text-sm text-muted-foreground">
                       {t("skills.emptyDescription")}
                     </p>
                   </div>