From 99bce5c4efdb63f3caa86147f3005b8473a7cd71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Sat, 5 Jul 2025 01:13:39 +0900
Subject: [PATCH] fix: improve dark mode color

---
 src/components/FileInput.tsx            |  4 ++--
 src/components/InstructionsTabs.tsx     | 13 ++++++++-----
 src/components/SDKVersion.tsx           |  2 +-
 src/features/file-listing/FileError.tsx |  4 ++--
 src/features/file-listing/FileRow.tsx   |  2 +-
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/FileInput.tsx b/src/components/FileInput.tsx
index e80038c..7a094fa 100644
--- a/src/components/FileInput.tsx
+++ b/src/components/FileInput.tsx
@@ -18,9 +18,9 @@ export function FileInput({ children, onReceiveFiles }: FileInputProps) {
       {...getRootProps()}
       className={classnames(
         'w-full max-w-xl border rounded-lg transition duration-500 p-6 border-base-300 mx-auto',
-        'cursor-pointer flex flex-col items-center hover:border-gray-400 hover:bg-gray-50',
+        'cursor-pointer flex flex-col items-center bg-base-200 hover:border-gray-400 hover:bg-gray-50 hover:dark:bg-gray-800',
         {
-          'bg-blue-50 border-blue-700': isDragActive,
+          'bg-blue-50 dark:bg-blue-900 border-blue-700': isDragActive,
         },
       )}
       tabIndex={0}
diff --git a/src/components/InstructionsTabs.tsx b/src/components/InstructionsTabs.tsx
index 0b5289c..16ff69a 100644
--- a/src/components/InstructionsTabs.tsx
+++ b/src/components/InstructionsTabs.tsx
@@ -15,17 +15,20 @@ export interface InstructionsTabsProps {
 export function InstructionsTabs({ limitHeight = false, tabs }: InstructionsTabsProps) {
   const id = useId();
   return (
-    <div className={classNames('tabs tabs-lift pb-4', { 'max-h-[32rem]': limitHeight })}>
+    <div className={classNames('tabs tabs-lift pb-4 mt-2', { 'max-h-[32rem]': limitHeight })}>
       {tabs.map(({ id: _tabId, label, content }, index) => (
         <Fragment key={_tabId}>
-          <label className="tab">
+          <label className="tab dark:[--tab-border-color:#555]">
             <input type="radio" name={id} defaultChecked={index === 0} />
             {label}
           </label>
           <div
-            className={classNames('tab-content border-base-300 bg-base-100 px-4 py-2 overflow-y-auto', {
-              'max-h-[30rem]': limitHeight,
-            })}
+            className={classNames(
+              'tab-content border-base-300 dark:border-[#555] bg-base-100 px-4 py-2 overflow-y-auto',
+              {
+                'max-h-[30rem]': limitHeight,
+              },
+            )}
           >
             {content}
           </div>
diff --git a/src/components/SDKVersion.tsx b/src/components/SDKVersion.tsx
index 4e256b3..8537fb5 100644
--- a/src/components/SDKVersion.tsx
+++ b/src/components/SDKVersion.tsx
@@ -16,7 +16,7 @@ export function SDKVersion() {
 
   return (
     <>
-      <span className="btn btn-ghost inline-flex p-0 h-[1em]" onClick={() => refDialog.current?.showModal()}>
+      <span className="btn btn-ghost inline-flex p-0" onClick={() => refDialog.current?.showModal()}>
         <MdInfoOutline />
       </span>
 
diff --git a/src/features/file-listing/FileError.tsx b/src/features/file-listing/FileError.tsx
index 79a3acf..cfad5ea 100644
--- a/src/features/file-listing/FileError.tsx
+++ b/src/features/file-listing/FileError.tsx
@@ -13,7 +13,7 @@ const errorMap = new Map<string | null | DecryptErrorType, string>([
 
 const ERROR_TEMPLATE = `解密错误：{{summary}}
 
-详细信息：
+详细错误信息：
 \`\`\`text
 {{error}}
 \`\`\`
@@ -46,7 +46,7 @@ export function FileError({ error, code }: FileErrorProps) {
       {error && (
         <div className="collapse border-error border w-full text-left my-2 py-0">
           <input className="[&&&]:py-2 [&&&]:min-h-[1.5rem]" type="checkbox" />
-          <div className="collapse-title font-semibold text-center [&&&]:min-h-[1.5rem] [&&&]:py-2">详细信息</div>
+          <div className="collapse-title font-semibold text-center [&&&]:min-h-[1.5rem] [&&&]:py-2">详细错误信息</div>
           <div className="collapse-content text-sm overflow-hidden">
             <pre className="overflow-x-auto w-full">{error}</pre>
             <p className="mt-2 text-center">
diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 6cf8c9f..b83bc66 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -15,7 +15,7 @@ export function FileRow({ id, file }: FileRowProps) {
   const decryptedName = file.cleanName + '.' + file.ext;
 
   return (
-    <div className="card bg-base-100 shadow-sm w-full md:w-[30%] " data-testid="file-row">
+    <div className="card bg-base-100 dark:bg-gray-700 shadow-sm w-full md:w-[30%] " data-testid="file-row">
       <div className="card-body items-center text-center px-2">
         <h2 className="card-title max-w-full whitespace-nowrap flex gap-0" data-testid="audio-meta-song-name">
           <span className="grow overflow-hidden text-ellipsis" title={decryptedName}>