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>