fix: improve dark mode color

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}

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>

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>
 

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">

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}>