From 5d0196c057d490775553ef83170537fb3655b10a Mon Sep 17 00:00:00 2001
From: oxmc7769 <oxmc7769.mail@gmail.com>
Date: Sun, 5 Jul 2026 06:01:04 -0700
Subject: [PATCH] fix: dark mode contrast bugs missed by the initial class
 sweep

Two whole categories of colored elements had no dark: variant at all,
so they rendered as glaring white boxes or invisible near-black text
against the dark background:

- Native <input>/<select> elements with no explicit bg-* class at all
  (just relied on the browser's default white background) - search bar,
  login/reset password fields, share/download link fields, mover search,
  change-password fields. The first class-sweep only added dark: variants
  next to *existing* color classes, so these were invisible to it.

- Hardcoded hex colors (text-[#212b36], text-[#637381], text-[#919eab],
  bg-[#f6f5fd], bg-[#ebe9f9], bg-[#F4F4F6]) used as arbitrary Tailwind
  values across headings, file list details, and the login/reset pages -
  same blind spot, since the sweep only searched for known class names.

Mapped each to the same dark palette already used elsewhere (gray-900/800/700
surfaces, gray-100/300/400 text) for consistency.
---
 src/components/Dataform/Dataform.tsx           |  4 ++--
 src/components/DownloadPage/DownloadPage.tsx   |  2 +-
 src/components/FileInfoPopup/FileInfoPopup.tsx |  2 +-
 src/components/FileItem/FileItem.tsx           |  6 +++---
 src/components/Files/Files.tsx                 |  2 +-
 src/components/Folders/Folders.tsx             |  6 +++---
 src/components/LoginPage/LoginPage.tsx         | 16 ++++++++--------
 src/components/Medias/Medias.tsx               |  6 +++---
 src/components/MoverPopup/MoverPopup.tsx       |  4 ++--
 .../MultiSelectBar/MultiSelectBar.tsx          |  2 +-
 src/components/QuickAccess/QuickAccess.tsx     |  2 +-
 .../QuickAccessItem/QuickAccessItem.tsx        |  2 +-
 .../ResetPasswordPage/ResetPasswordPage.tsx    | 10 +++++-----
 src/components/RightSection/RightSection.tsx   | 18 +++++++++---------
 src/components/SearchBar/SearchBar.tsx         |  2 +-
 .../SettingsChangePasswordPopup.tsx            |  6 +++---
 src/components/SharePopup/SharePopup.tsx       |  4 ++--
 src/components/UploadItem/UploadItem.tsx       |  2 +-
 18 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/components/Dataform/Dataform.tsx b/src/components/Dataform/Dataform.tsx
index dec6344..9da4de1 100644
--- a/src/components/Dataform/Dataform.tsx
+++ b/src/components/Dataform/Dataform.tsx
@@ -118,8 +118,8 @@ const DataForm = memo(
 
             {isTrash && (
               <div
-                className="bg-light-primary p-4 rounded-md text-sm 
-              text-black mt-4 flex items-center select-none"
+                className="bg-light-primary p-4 rounded-md text-sm
+              text-black dark:text-gray-100 mt-4 flex items-center select-none"
               >
                 <AlertIcon className="w-6 h-6 min-h-6 min-w-6 mr-2" />
                 <span>
diff --git a/src/components/DownloadPage/DownloadPage.tsx b/src/components/DownloadPage/DownloadPage.tsx
index 725ba89..b47e275 100644
--- a/src/components/DownloadPage/DownloadPage.tsx
+++ b/src/components/DownloadPage/DownloadPage.tsx
@@ -102,7 +102,7 @@ const PublicDownloadPage = () => {
         <div className="w-[90%] sm:w-[500px] p-6 bg-white dark:bg-gray-900 rounded-md animate-easy">
           <div className="bg-light-primary p-6 rounded-md flex items-center space-x-2">
             <input
-              className="rounded-md w-full text-xs h-10 p-2"
+              className="rounded-md w-full text-xs h-10 p-2 bg-white dark:bg-gray-900 text-black dark:text-gray-100"
               value={file.filename}
             />
             <button
diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx
index e3fc11f..18bca4a 100644
--- a/src/components/FileInfoPopup/FileInfoPopup.tsx
+++ b/src/components/FileInfoPopup/FileInfoPopup.tsx
@@ -149,7 +149,7 @@ const FileInfoPopup = () => {
       >
         <div className="bg-light-primary p-6 rounded-md flex items-center space-x-2">
           <input
-            className="rounded-md w-full text-xs h-10 p-2"
+            className="rounded-md w-full text-xs h-10 p-2 bg-white dark:bg-gray-900 text-black dark:text-gray-100"
             value={file.filename}
           />
           <button
diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx
index 3d9b022..d289d8c 100644
--- a/src/components/FileItem/FileItem.tsx
+++ b/src/components/FileItem/FileItem.tsx
@@ -102,7 +102,7 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
         className={classNames(
           "text-[14px] font-normal border-y",
           !elementSelected && !elementMultiSelected
-            ? "text-[#212b36] hover:bg-[#f6f5fd]"
+            ? "text-[#212b36] dark:text-gray-100 hover:bg-[#f6f5fd] dark:hover:bg-gray-800"
             : "bg-[#3c85ee] animate text-white"
         )}
         onClick={fileClick}
@@ -158,7 +158,7 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
                   "w-4 h-4",
                   elementSelected || elementMultiSelected
                     ? "text-white"
-                    : "text-[#919eab]"
+                    : "text-[#919eab] dark:text-gray-400"
                 )}
               />
             </a>
@@ -255,7 +255,7 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
               "text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate mb-0",
               elementSelected || elementMultiSelected
                 ? "text-white"
-                : "text-[#212b36]"
+                : "text-[#212b36] dark:text-gray-100"
             )}
           >
             {formattedFilename}
diff --git a/src/components/Files/Files.tsx b/src/components/Files/Files.tsx
index f399360..0f82094 100644
--- a/src/components/Files/Files.tsx
+++ b/src/components/Files/Files.tsx
@@ -21,7 +21,7 @@ const Files = memo(() => {
     <div className="mt-8 select-none">
       <div>
         <div className="flex justify-between items-center mb-5">
-          <h2 className="m-0 text-xl font-medium">
+          <h2 className="m-0 text-xl font-medium text-black dark:text-gray-100">
             {isHome ? "Home" : ""} Files
           </h2>
           <div>
diff --git a/src/components/Folders/Folders.tsx b/src/components/Folders/Folders.tsx
index 58a8e33..872628f 100644
--- a/src/components/Folders/Folders.tsx
+++ b/src/components/Folders/Folders.tsx
@@ -90,13 +90,13 @@ const Folders = memo(
         <div className="flex flex-row mb-5 justify-between items-center">
           <h2
             className={classNames(
-              "m-0 text-xl font-medium"
+              "m-0 text-xl font-medium text-black dark:text-gray-100"
               // isHome || isTrash ? "block" : "invisible"
             )}
           >
             {title}
           </h2>
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center text-gray-primary dark:text-gray-300">
             <a className="mr-2" onClick={switchOrderSortBy}>
               <svg
                 className="h-3 w-3 cursor-pointer animate"
@@ -121,7 +121,7 @@ const Folders = memo(
               </svg>
             </a>
             <select
-              className="text-sm font-medium appearance-none bg-white dark:bg-gray-900"
+              className="text-sm font-medium appearance-none bg-white dark:bg-gray-900 text-gray-primary dark:text-gray-300"
               onChange={switchTypeOrderBy}
               value={
                 sortBy === "alp_desc" || sortBy === "alp_asc" ? "name" : "date"
diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx
index 2a168d1..fef427d 100755
--- a/src/components/LoginPage/LoginPage.tsx
+++ b/src/components/LoginPage/LoginPage.tsx
@@ -233,7 +233,7 @@ const LoginPage = () => {
 
   return (
     <div>
-      <div className="bg-[#F4F4F6] w-screen dynamic-height flex justify-center items-center">
+      <div className="bg-[#F4F4F6] dark:bg-gray-950 w-screen dynamic-height flex justify-center items-center">
         <div className="rounded-md shadow-lg bg-white dark:bg-gray-900 p-10 relative w-[90%] sm:w-[500px] animate-height">
           <div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
             <div className="flex items-center justify-center rounded-full bg-white dark:bg-gray-900 p-3 shadow-md">
@@ -244,14 +244,14 @@ const LoginPage = () => {
             </div>
           </div>
           <form onSubmit={onSubmit}>
-            <p className="text-[#212B36] font-medium text-[25px] mt-0 mb-[15px] text-center">
+            <p className="text-[#212B36] dark:text-gray-100 font-medium text-[25px] mt-0 mb-[15px] text-center">
               {headerTitle}
             </p>
             {/* Email Address */}
             <input
               type="text"
               placeholder="Email address"
-              className="w-full h-[48px] pl-[12px] pr-[12px] text-black dark:text-gray-100 border border-[#637381] rounded-[5px] outline-none text-[15px]"
+              className="w-full h-[48px] pl-[12px] pr-[12px] bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-[#637381] dark:border-gray-700 rounded-[5px] outline-none text-[15px]"
               onChange={(e) => setEmail(e.target.value)}
               value={email}
             />
@@ -262,7 +262,7 @@ const LoginPage = () => {
                 <input
                   type="password"
                   placeholder="Password"
-                  className="w-full h-[48px] pl-[12px] pr-[70px] text-black dark:text-gray-100 border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+                  className="w-full h-[48px] pl-[12px] pr-[70px] bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-[#637381] dark:border-gray-700 rounded-[5px] outline-none text-[15px] mt-4"
                   onChange={(e) => setPassword(e.target.value)}
                   value={password}
                 />
@@ -284,7 +284,7 @@ const LoginPage = () => {
               <input
                 type="password"
                 placeholder="Verify Password"
-                className="w-full h-[48px] pl-[12px] pr-[12px] text-black dark:text-gray-100 border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+                className="w-full h-[48px] pl-[12px] pr-[12px] bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-[#637381] dark:border-gray-700 rounded-[5px] outline-none text-[15px] mt-4"
                 onChange={(e) => setVerifyPassword(e.target.value)}
                 value={verifyPassword}
               />
@@ -303,7 +303,7 @@ const LoginPage = () => {
 
             <div className="mt-4">
               {mode === "login" && (
-                <p className="text-center text-[#637381] text-[15px] font-normal">
+                <p className="text-center text-[#637381] dark:text-gray-300 text-[15px] font-normal">
                   Don't have an account?{" "}
                   <a
                     onClick={() => setMode("create")}
@@ -314,7 +314,7 @@ const LoginPage = () => {
                 </p>
               )}
               {(mode === "create" || mode === "reset") && (
-                <p className="text-center text-[#637381] text-[15px] font-normal">
+                <p className="text-center text-[#637381] dark:text-gray-300 text-[15px] font-normal">
                   Back to{" "}
                   <a
                     onClick={() => setMode("login")}
@@ -329,7 +329,7 @@ const LoginPage = () => {
               <div className="mt-4">
                 <div className="flex justify-center items-center">
                   <AlertIcon className="w-[20px] text-red-600 mr-2" />
-                  <p className="text-[#637381] text-[15px]">
+                  <p className="text-[#637381] dark:text-gray-300 text-[15px]">
                     {validationError || error}
                   </p>
                 </div>
diff --git a/src/components/Medias/Medias.tsx b/src/components/Medias/Medias.tsx
index 11102cb..ff04540 100644
--- a/src/components/Medias/Medias.tsx
+++ b/src/components/Medias/Medias.tsx
@@ -97,8 +97,8 @@ const Medias = memo(
     return (
       <div className="w-full overflow-y-scroll select-none" ref={scrollDivRef}>
         <div className="flex flex-row justify-between items-center mt-2 p-[17px_15px] desktopMode:p-[17px_40px] mb-2">
-          <h2 className={classNames("m-0 text-xl font-medium")}>{title}</h2>
-          <div className="flex flex-row items-center">
+          <h2 className={classNames("m-0 text-xl font-medium text-black dark:text-gray-100")}>{title}</h2>
+          <div className="flex flex-row items-center text-gray-primary dark:text-gray-300">
             <a className="mr-2" onClick={switchOrderSortBy}>
               <svg
                 className="h-3 w-3 cursor-pointer animate"
@@ -123,7 +123,7 @@ const Medias = memo(
               </svg>
             </a>
             <select
-              className="text-sm font-medium appearance-none bg-white dark:bg-gray-900"
+              className="text-sm font-medium appearance-none bg-white dark:bg-gray-900 text-gray-primary dark:text-gray-300"
               onChange={mediaFilterOnChange}
               value={mediaFilter}
             >
diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx
index ad3ea68..b33fa7c 100644
--- a/src/components/MoverPopup/MoverPopup.tsx
+++ b/src/components/MoverPopup/MoverPopup.tsx
@@ -219,7 +219,7 @@ const MoverPopup = () => {
           />
           {!multiSelectMode && (
             <input
-              className="w-full py-2 px-3 text-black dark:text-gray-100 border border-gray-primary rounded-md text-sm outline-none"
+              className="w-full py-2 px-3 bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-gray-primary dark:border-gray-700 rounded-md text-sm outline-none"
               placeholder="Search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -244,7 +244,7 @@ const MoverPopup = () => {
               {folderList?.map((folder: FolderInterface) => (
                 <div
                   className={classNames(
-                    "p-2 border-b border-[#ebe9f9] rounded-md flex flex-row items-center",
+                    "p-2 border-b border-[#ebe9f9] dark:border-gray-700 rounded-md flex flex-row items-center",
                     {
                       "bg-primary text-white hover:bg-primary-hover":
                         selectedFolder?._id === folder._id,
diff --git a/src/components/MultiSelectBar/MultiSelectBar.tsx b/src/components/MultiSelectBar/MultiSelectBar.tsx
index a1bdc63..daf651c 100644
--- a/src/components/MultiSelectBar/MultiSelectBar.tsx
+++ b/src/components/MultiSelectBar/MultiSelectBar.tsx
@@ -156,7 +156,7 @@ const MultiSelectBar: React.FC = () => {
 
   return (
     <div className="flex justify-center items-center">
-      <div className="border border-[#ebe9f9] bg-[#ebe9f9] rounded-full p-2 px-5 text-black text-sm mb-4 max-w-[600px] w-full mt-4 min-w-[300px] shadow-lg">
+      <div className="border border-[#ebe9f9] dark:border-gray-700 bg-[#ebe9f9] dark:bg-gray-800 rounded-full p-2 px-5 text-black dark:text-gray-100 text-sm mb-4 max-w-[600px] w-full mt-4 min-w-[300px] shadow-lg">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-row items-center">
             <CloseIcon
diff --git a/src/components/QuickAccess/QuickAccess.tsx b/src/components/QuickAccess/QuickAccess.tsx
index bface97..a4ee0fd 100644
--- a/src/components/QuickAccess/QuickAccess.tsx
+++ b/src/components/QuickAccess/QuickAccess.tsx
@@ -16,7 +16,7 @@ const QuickAccess = memo(() => {
       style={isHome ? { display: "block" } : { display: "none" }}
     >
       <div className="flex flex-row items-center justify-between mb-5">
-        <h2 className=" text-[#212b36] text-xl font-medium">Quick Access</h2>
+        <h2 className=" text-[#212b36] dark:text-gray-100 text-xl font-medium">Quick Access</h2>
         <ChevronOutline
           onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
           className={classNames(
diff --git a/src/components/QuickAccessItem/QuickAccessItem.tsx b/src/components/QuickAccessItem/QuickAccessItem.tsx
index e9616b1..d009aae 100644
--- a/src/components/QuickAccessItem/QuickAccessItem.tsx
+++ b/src/components/QuickAccessItem/QuickAccessItem.tsx
@@ -184,7 +184,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => {
             "text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate mb-0",
             elementSelected || elementMultiSelected
               ? "text-white"
-              : "text-[#212b36]"
+              : "text-[#212b36] dark:text-gray-100"
           )}
         >
           {formattedFilename}
diff --git a/src/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/components/ResetPasswordPage/ResetPasswordPage.tsx
index ff2fd8a..2dc98b0 100644
--- a/src/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/src/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -63,7 +63,7 @@ const ResetPasswordPage = () => {
 
   return (
     <div>
-      <div className="bg-[#F4F4F6] w-screen dynamic-height flex justify-center items-center">
+      <div className="bg-[#F4F4F6] dark:bg-gray-950 w-screen dynamic-height flex justify-center items-center">
         <div className="rounded-md shadow-lg bg-white dark:bg-gray-900 p-10 relative w-[90%] sm:w-[500px] animate-height">
           <div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
             <div className="flex items-center justify-center rounded-full bg-white dark:bg-gray-900 p-3 shadow-md">
@@ -74,21 +74,21 @@ const ResetPasswordPage = () => {
             </div>
           </div>
           <form onSubmit={onSubmit}>
-            <p className="text-[#212B36] font-medium text-[25px] mt-0 mb-[15px] text-center">
+            <p className="text-[#212B36] dark:text-gray-100 font-medium text-[25px] mt-0 mb-[15px] text-center">
               Reset password
             </p>
 
             <input
               type="password"
               placeholder="Password"
-              className="w-full h-[48px] pl-[12px] pr-[70px] text-black dark:text-gray-100 border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+              className="w-full h-[48px] pl-[12px] pr-[70px] bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-[#637381] dark:border-gray-700 rounded-[5px] outline-none text-[15px] mt-4"
               onChange={(e) => setPassword(e.target.value)}
               value={password}
             />
             <input
               type="password"
               placeholder="Verify Password"
-              className="w-full h-[48px] pl-[12px] pr-[12px] text-black dark:text-gray-100 border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+              className="w-full h-[48px] pl-[12px] pr-[12px] bg-white dark:bg-gray-900 text-black dark:text-gray-100 border border-[#637381] dark:border-gray-700 rounded-[5px] outline-none text-[15px] mt-4"
               onChange={(e) => setVerifyPassword(e.target.value)}
               value={verifyPassword}
             />
@@ -106,7 +106,7 @@ const ResetPasswordPage = () => {
               <div className="mt-4">
                 <div className="flex justify-center items-center">
                   <AlertIcon className="w-[20px] text-red-600 mr-2" />
-                  <p className="text-[#637381] text-[15px]">
+                  <p className="text-[#637381] dark:text-gray-300 text-[15px]">
                     {error ? error : errorMessage}
                   </p>
                 </div>
diff --git a/src/components/RightSection/RightSection.tsx b/src/components/RightSection/RightSection.tsx
index 0e5185b..81ae616 100644
--- a/src/components/RightSection/RightSection.tsx
+++ b/src/components/RightSection/RightSection.tsx
@@ -150,7 +150,7 @@ const RightSection = memo(() => {
               />
             </div>
             <div className="p-6">
-              <p className="m-0 text-[#212b36] text-sm font-bold max-h-[90px] overflow-hidden text-ellipsis block break-all">
+              <p className="m-0 text-[#212b36] dark:text-gray-100 text-sm font-bold max-h-[90px] overflow-hidden text-ellipsis block break-all">
                 {formattedName}
               </p>
             </div>
@@ -159,10 +159,10 @@ const RightSection = memo(() => {
               <p className="text-sm mb-4">Information</p>
               <div className="flex flex-col space-y-2">
                 <div className="flex justify-between border-b border-gray-200 pb-2">
-                  <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
+                  <span className="text-[#637381] dark:text-gray-300 text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
                     Type
                   </span>
-                  <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+                  <span className="text-[#212b36] dark:text-gray-100 text-[13px] font-normal leading-[20px]">
                     {selectedItem.file ? fileExtension : "Folder"}
                   </span>
                 </div>
@@ -174,18 +174,18 @@ const RightSection = memo(() => {
                       : { display: "flex" }
                   }
                 >
-                  <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
+                  <span className="text-[#637381] dark:text-gray-300 text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
                     Size
                   </span>
-                  <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+                  <span className="text-[#212b36] dark:text-gray-100 text-[13px] font-normal leading-[20px]">
                     {fileSize}
                   </span>
                 </div>
                 <div className="flex justify-between border-b border-gray-200 pb-2">
-                  <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
+                  <span className="text-[#637381] dark:text-gray-300 text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
                     Created
                   </span>
-                  <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+                  <span className="text-[#212b36] dark:text-gray-100 text-[13px] font-normal leading-[20px]">
                     {formattedDate}
                   </span>
                 </div>
@@ -197,10 +197,10 @@ const RightSection = memo(() => {
                       : { display: "flex" }
                   }
                 >
-                  <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
+                  <span className="text-[#637381] dark:text-gray-300 text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
                     Access
                   </span>
-                  <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
+                  <span className="text-[#212b36] dark:text-gray-100 text-[13px] font-normal leading-[20px]">
                     {selectedItem.file?.metadata.link ? "Public" : "Private"}
                   </span>
                 </div>
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 1aa403c..9346dbf 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -133,7 +133,7 @@ const SearchBar = memo(() => {
         onChange={onChangeSearch}
         value={searchText}
         placeholder={searchTextPlaceholder}
-        className="w-full h-8 border border-gray-300 pl-11 pr-4 text-base text-black dark:text-gray-100 rounded-md"
+        className="w-full h-8 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 pl-11 pr-4 text-base text-black dark:text-gray-100 rounded-md"
         onFocus={onFocus}
         id="search-bar"
         autoComplete="off"
diff --git a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx b/src/components/SettingsPage/SettingsChangePasswordPopup.tsx
index 7f38447..a8caba6 100644
--- a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx
+++ b/src/components/SettingsPage/SettingsChangePasswordPopup.tsx
@@ -101,7 +101,7 @@ const SettingsChangePasswordPopup: React.FC<
           <label>
             <p className="text-sm text-gray-primary dark:text-gray-300 mb-1">Current password</p>
             <input
-              className="border border-[#BEC9D3] rounded-md py-2 px-3 text-black dark:text-gray-100 w-full text-sm mb-3"
+              className="border border-[#BEC9D3] dark:border-gray-700 bg-white dark:bg-gray-900 rounded-md py-2 px-3 text-black dark:text-gray-100 w-full text-sm mb-3"
               type="password"
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
@@ -111,7 +111,7 @@ const SettingsChangePasswordPopup: React.FC<
           <label>
             <p className="text-sm text-gray-primary dark:text-gray-300 mb-1">New password</p>
             <input
-              className="border border-[#BEC9D3] rounded-md py-2 px-3 text-black dark:text-gray-100 w-full mb-3"
+              className="border border-[#BEC9D3] dark:border-gray-700 bg-white dark:bg-gray-900 rounded-md py-2 px-3 text-black dark:text-gray-100 w-full mb-3"
               type="password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
@@ -123,7 +123,7 @@ const SettingsChangePasswordPopup: React.FC<
               Verify new password
             </p>
             <input
-              className="border border-[#BEC9D3] rounded-md py-2 px-3 text-black dark:text-gray-100 w-full mb-3"
+              className="border border-[#BEC9D3] dark:border-gray-700 bg-white dark:bg-gray-900 rounded-md py-2 px-3 text-black dark:text-gray-100 w-full mb-3"
               type="password"
               value={verifyNewPassword}
               onChange={(e) => setVerifyNewPassword(e.target.value)}
diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx
index deec4de..05bf810 100644
--- a/src/components/SharePopup/SharePopup.tsx
+++ b/src/components/SharePopup/SharePopup.tsx
@@ -220,7 +220,7 @@ const SharePopup = memo(() => {
         <p>Share file</p>
         <div className="bg-light-primary p-6 rounded-md mt-4 flex items-center space-x-2">
           <input
-            className="rounded-md w-full text-xs h-10 p-2"
+            className="rounded-md w-full text-xs h-10 p-2 bg-white dark:bg-gray-900 text-black dark:text-gray-100"
             value={linkPreviewText}
           />
           <button
@@ -236,7 +236,7 @@ const SharePopup = memo(() => {
           {shareType === "one" && <OneIcon className="w-5 h-5 mr-2" />}
           {shareType === "public" && <PublicIcon className="w-5 h-5 mr-2" />}
           <select
-            className="text-sm"
+            className="text-sm bg-white dark:bg-gray-900 text-black dark:text-gray-100"
             value={shareType}
             onChange={selectOnChange}
             disabled={updating}
diff --git a/src/components/UploadItem/UploadItem.tsx b/src/components/UploadItem/UploadItem.tsx
index 100ba2e..2c31cd5 100644
--- a/src/components/UploadItem/UploadItem.tsx
+++ b/src/components/UploadItem/UploadItem.tsx
@@ -44,7 +44,7 @@ const UploadItem: React.FC<UploadItemType> = (props) => {
   });
 
   return (
-    <div className="relative p-[20px] flex justify-between items-start hover:bg-[#f6f5fd]">
+    <div className="relative p-[20px] flex justify-between items-start hover:bg-[#f6f5fd] dark:hover:bg-gray-800">
       <div className="w-full">
         <div className="flex justify-between items-center mb-1">
           <div className="mr-[30px]">