finished working on dark mode

components/Modal/Collection/DeleteCollection.tsx

@@ -50,7 +50,7 @@ export default function DeleteCollection({
           <p className="text-red-500 font-bold text-center">Warning!</p>
 
           <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-gray-500">
+            <div className="text-gray-500 dark:text-sky-500">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -81,7 +81,7 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-sky-900 select-none text-center">
+            <p className="text-sky-900 dark:text-sky-300 select-none text-center">
               To confirm, type &quot;
               <span className="font-bold text-sky-700">{collection.name}</span>
               &quot; in the box below:
@@ -93,12 +93,12 @@ export default function DeleteCollection({
               onChange={(e) => setInputField(e.target.value)}
               type="text"
               placeholder={`Type "${collection.name}" Here.`}
-              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-72 sm:w-96 rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
             />
           </div>
         </>
       ) : (
-        <p className="text-gray-500">
+        <p className="text-gray-500 dark:text-sky-500">
           Click the button below to leave the current collection:
         </p>
       )}