many coloring changes and improvements

components/Checkbox.tsx

@@ -11,9 +11,7 @@ type Props = {
 
 export default function Checkbox({ label, state, className, onClick }: Props) {
   return (
-    <label
+    <label className={`cursor-pointer flex items-center gap-2 ${className}`}>
-      className={`cursor-pointer flex items-center gap-2 text-sky-700 ${className}`}
-    >
       <input
         type="checkbox"
         checked={state}
@@ -22,13 +20,15 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faSquareCheck}
-        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faSquare}
-        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-500 dark:text-sky-300 peer-checked:hidden block"
       />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-black dark:text-white rounded select-none">
+        {label}
+      </span>
     </label>
   );
 }

components/CollectionCard.tsx

@@ -42,14 +42,14 @@ export default function CollectionCard({ collection, className }: Props) {
         <FontAwesomeIcon
           icon={faEllipsis}
           id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500 dark:text-sky-500"
+          className="w-5 h-5 text-gray-500 dark:text-white"
         />
       </div>
       <Link
         href={`/collections/${collection.id}`}
         className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
       >
-        <p className="text-2xl font-bold capitalize text-sky-700 dark:text-sky-300 break-words line-clamp-3 w-4/5">
+        <p className="text-2xl font-bold capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
           {collection.name}
         </p>
         <div className="flex justify-between items-center">
@@ -73,11 +73,14 @@ export default function CollectionCard({ collection, className }: Props) {
             ) : null}
           </div>
           <div className="text-right w-40">
-            <div className="text-sky-700 dark:text-sky-400 font-bold text-sm flex justify-end gap-1 items-center">
+            <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500 dark:text-sky-300" />
+              <FontAwesomeIcon
+                icon={faLink}
+                className="w-5 h-5 text-black dark:text-white"
+              />
               {collection._count && collection._count.links}
             </div>
-            <div className="flex items-center justify-end gap-1 text-gray-600 dark:text-sky-500">
+            <div className="flex items-center justify-end gap-1 text-gray-600 dark:text-white">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p className="font-bold text-xs">{formattedDate}</p>
             </div>

components/Dropdown.tsx

@@ -31,9 +31,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
         const inner = e && (
           <div className="cursor-pointer rounded-md">
             <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
-              <p className="text-sky-900 dark:text-sky-400 select-none">
+              <p className="text-black dark:text-white select-none">{e.name}</p>
-                {e.name}
-              </p>
             </div>
           </div>
         );

components/FilterSearchDropdown.tsx

@@ -20,9 +20,11 @@ export default function FilterSearchDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "filter-dropdown") setFilterDropdown(false);
       }}
-      className="absolute top-8 right-0 border border-sky-100 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-40"
     >
-      <p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
+        Filter by
+      </p>
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"

components/LinkCard.tsx

@@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
         <div
           onClick={() => setExpandDropdown(!expandDropdown)}
           id={"expand-dropdown" + link.id}
-          className="text-gray-500 dark:text-sky-400 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
+          className="text-gray-500 dark:text-white inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
         >
           <FontAwesomeIcon
             icon={faEllipsis}
@@ -156,8 +156,10 @@ export default function LinkCard({ link, count, className }: Props) {
         <div className="flex justify-between gap-5 w-full h-full z-0">
           <div className="flex flex-col justify-between w-full">
             <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 dark:text-sky-200 font-bold">{count + 1}.</p>
+              <p className="text-sm text-black dark:text-white font-bold">
-              <p className="text-lg text-sky-700 dark:text-sky-200 font-bold truncate capitalize w-full pr-8">
+                {count + 1}.
+              </p>
+              <p className="text-lg text-black dark:text-white font-bold truncate capitalize w-full pr-8">
                 {link.name || link.description}
               </p>
             </div>
@@ -168,16 +170,16 @@ export default function LinkCard({ link, count, className }: Props) {
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900 dark:text-sky-300 truncate capitalize">
+                <p className="text-black dark:text-white truncate capitalize">
                   {collection?.name}
                 </p>
               </div>
             </div>
-            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-sky-500">
+            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-white">
               <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
               <p className="truncate w-full">{shortendURL}</p>
             </div>
-            <div className="flex items-center gap-1 text-gray-500 dark:text-sky-500">
+            <div className="flex items-center gap-1 text-gray-500 dark:text-white">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p>{formattedDate}</p>
             </div>

components/Modal/Collection/CollectionInfo.tsx

@@ -60,7 +60,7 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">
             Name
             <RequiredBadge />
           </p>
@@ -76,7 +76,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">
+                <p className="text-sm w-full text-black dark:text-white mb-2">
                   Icon Color
                 </p>
                 <div style={{ color: collection.color }}>
@@ -86,7 +86,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 dark:text-sky-400 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -103,9 +103,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">Description</p>
-            Description
-          </p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-sky-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
             placeholder="The purpose of this Collection..."

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 dark:text-sky-500">
+            <div className="text-gray-500 dark:text-white">
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -81,9 +81,9 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-sky-900 dark:text-sky-300 select-none text-center">
+            <p className="text-black dark:text-white select-none text-center">
               To confirm, type &quot;
-              <span className="font-bold text-sky-700">{collection.name}</span>
+              <span className="font-bold text-black">{collection.name}</span>
               &quot; in the box below:
             </p>
 
@@ -98,7 +98,7 @@ export default function DeleteCollection({
           </div>
         </>
       ) : (
-        <p className="text-gray-500 dark:text-sky-500">
+        <p className="text-gray-500 dark:text-white">
           Click the button below to leave the current collection:
         </p>
       )}

components/Modal/Collection/TeamManagement.tsx

@@ -117,7 +117,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700 dark:text-sky-300">Make Public</p>
+          <p className="text-sm text-black dark:text-white">Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -127,7 +127,7 @@ export default function TeamManagement({
             }
           />
 
-          <p className="text-gray-500 dark:text-sky-500 text-sm">
+          <p className="text-gray-500 dark:text-white text-sm">
             This will let <b>Anyone</b> to view this collection.
           </p>
         </>
@@ -135,7 +135,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-300 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">
             Public Link (Click to copy)
           </p>
           <div
@@ -159,7 +159,7 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-sm text-sky-700 dark:text-sky-300">
+          <p className="text-sm text-black dark:text-white">
             Member Management
           </p>
 
@@ -205,7 +205,7 @@ export default function TeamManagement({
 
       {collection?.members[0]?.user && (
         <>
-          <p className="text-center text-gray-500 dark:text-sky-500 text-xs sm:text-sm">
+          <p className="text-center text-gray-500 dark:text-white text-xs sm:text-sm">
             (All Members have <b>Read</b> access to this collection.)
           </p>
           <div className="flex flex-col gap-3 rounded-md">
@@ -220,7 +220,7 @@ export default function TeamManagement({
                     {permissions === true && (
                       <FontAwesomeIcon
                         icon={faClose}
-                        className="absolute right-2 top-2 text-gray-500 dark:text-sky-500 h-4 hover:text-red-500 duration-100 cursor-pointer"
+                        className="absolute right-2 top-2 text-gray-500 dark:text-white h-4 hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -241,23 +241,23 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-sky-700 dark:text-sky-300">
+                        <p className="text-sm font-bold text-black dark:text-white">
                           {e.user.name}
                         </p>
-                        <p className="text-sky-900">@{e.user.username}</p>
+                        <p className="text-black">@{e.user.username}</p>
                       </div>
                     </div>
                     <div className="flex sm:block items-center gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-sky-700 dark:text-sky-300 ${
+                          className={`font-bold text-sm text-black dark:text-white ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
                           Permissions
                         </p>
                         {permissions === true && (
-                          <p className="text-xs text-gray-500 dark:text-sky-500 mb-2">
+                          <p className="text-xs text-gray-500 dark:text-white mb-2">
                             (Click to toggle.)
                           </p>
                         )}
@@ -267,7 +267,7 @@ export default function TeamManagement({
                       !e.canCreate &&
                       !e.canUpdate &&
                       !e.canDelete ? (
-                        <p className="text-sm text-gray-500 dark:text-sky-500">
+                        <p className="text-sm text-gray-500 dark:text-white">
                           Has no permissions.
                         </p>
                       ) : (
@@ -307,7 +307,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -352,7 +352,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -397,7 +397,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-sky-900 dark:text-sky-300 peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 duration-75"
                                   : ""
@@ -427,7 +427,7 @@ export default function TeamManagement({
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-sky-700 dark:text-sky-400">
+              <p className="text-sm font-bold text-black dark:text-white">
                 {collectionOwner.name}
               </p>
               <FontAwesomeIcon
@@ -435,13 +435,13 @@ export default function TeamManagement({
                 className="w-3 h-3 text-yellow-500"
               />
             </div>
-            <p className="text-sky-900 dark:text-sky-300">
+            <p className="text-black dark:text-white">
               @{collectionOwner.username}
             </p>
           </div>
         </div>
 
-        <div className="flex flex-col justify-center min-w-[10rem] text-sky-700 dark:text-sky-400">
+        <div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
           <p className={`font-bold text-sm`}>Permissions</p>
           <p>Full Access (Owner)</p>
         </div>

components/Modal/Collection/index.tsx

@@ -46,17 +46,19 @@ export default function CollectionModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-sky-700 dark:text-sky-400 text-center">New Collection</p>
+          <p className="text-xl text-black dark:text-white text-center">
+            New Collection
+          </p>
         )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-400">
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
           {method === "UPDATE" && (
             <>
               {isOwner && (
                 <Tab
                   className={({ selected }) =>
                     selected
-                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
-                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
                   }
                 >
                   Collection Info
@@ -65,8 +67,8 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Share & Collaborate" : "View Team"}
@@ -74,8 +76,8 @@ export default function CollectionModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-900 duration-100 rounded-md outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-sky-900 rounded-md duration-100 outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-300 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Delete Collection" : "Leave Collection"}

components/Modal/Link/AddOrEditLink.tsx

@@ -126,7 +126,7 @@ export default function AddOrEditLink({
 
       {method === "CREATE" ? (
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
+          <p className="text-sm text-black dark:text-white mb-2 font-bold">
             Address (URL)
             <RequiredBadge />
           </p>
@@ -142,9 +142,7 @@ export default function AddOrEditLink({
       <hr className="dark:border-sky-800" />
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">Collection</p>
-            Collection
-          </p>
           <CollectionSelection
             onChange={setCollection}
             // defaultValue={{
@@ -163,7 +161,7 @@ export default function AddOrEditLink({
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Tags</p>
+          <p className="text-sm text-black dark:text-white mb-2">Tags</p>
           <TagSelection
             onChange={setTags}
             defaultValue={link.tags.map((e) => {
@@ -173,7 +171,7 @@ export default function AddOrEditLink({
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
+          <p className="text-sm text-black dark:text-white mb-2">Name</p>
           <input
             value={link.name}
             onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -184,9 +182,7 @@ export default function AddOrEditLink({
         </div>
 
         <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+          <p className="text-sm text-black dark:text-white mb-2">Description</p>
-            Description
-          </p>
           <textarea
             value={link.description}
             onChange={(e) => setLink({ ...link, description: e.target.value })}

components/Modal/Link/LinkDetails.tsx

@@ -151,14 +151,14 @@ export default function LinkDetails({ link }: Props) {
           />
         )}
         <div className="flex flex-col min-h-[3rem] justify-end drop-shadow">
-          <p className="text-2xl text-sky-700 dark:text-sky-300 capitalize break-words hyphens-auto">
+          <p className="text-2xl text-black dark:text-white capitalize break-words hyphens-auto">
             {link.name}
           </p>
           <Link
             href={link.url}
             target="_blank"
             rel="noreferrer"
-            className="text-sm text-gray-500 dark:text-sky-400 break-all hover:underline cursor-pointer w-fit"
+            className="text-sm text-gray-500 dark:text-white break-all hover:underline cursor-pointer w-fit"
           >
             {url ? url.host : link.url}
           </Link>
@@ -176,7 +176,7 @@ export default function LinkDetails({ link }: Props) {
           />
           <p
             title={collection?.name}
-            className="text-sky-900 dark:text-sky-500 text-lg truncate max-w-[12rem]"
+            className="text-black dark:text-white text-lg truncate max-w-[12rem]"
           >
             {collection?.name}
           </p>
@@ -185,7 +185,7 @@ export default function LinkDetails({ link }: Props) {
           <Link key={i} href={`/tags/${e.id}`} className="z-10">
             <p
               title={e.name}
-              className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+              className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
             >
               {e.name}
             </p>
@@ -194,19 +194,19 @@ export default function LinkDetails({ link }: Props) {
       </div>
       {link.description && (
         <>
-          <div className="text-gray-500 dark:text-sky-400 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
+          <div className="text-gray-500 dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
             {link.description}
           </div>
         </>
       )}
 
       <div className="flex justify-between items-center">
-        <div className="flex items-center gap-1 text-gray-500 dark:text-sky-400">
+        <div className="flex items-center gap-1 text-gray-500 dark:text-white">
           <FontAwesomeIcon icon={faBoxArchive} className="w-4 h-4" />
           <p>Archived Formats:</p>
         </div>
         <div
-          className="flex items-center gap-1 text-gray-500 dark:text-sky-400"
+          className="flex items-center gap-1 text-gray-500 dark:text-white"
           title={"Created at: " + formattedDate}
         >
           <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -220,10 +220,10 @@ export default function LinkDetails({ link }: Props) {
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500 dark:text-sky-400">Screenshot</p>
+            <p className="text-gray-500 dark:text-white">Screenshot</p>
           </div>
 
-          <div className="flex text-sky-400 gap-1">
+          <div className="flex text-black gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
@@ -254,10 +254,10 @@ export default function LinkDetails({ link }: Props) {
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
-            <p className="text-gray-500 dark:text-sky-400">PDF</p>
+            <p className="text-gray-500 dark:text-white">PDF</p>
           </div>
 
-          <div className="flex text-sky-500 gap-1">
+          <div className="flex text-black gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"

components/Modal/Link/index.tsx

@@ -33,10 +33,12 @@ export default function LinkModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-sky-700 dark:text-sky-300 text-center">New Link</p>
+          <p className="text-xl text-black dark:text-white text-center">
+            New Link
+          </p>
         )}
         <Tab.List
-          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300 ${
+          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white ${
             isOwnerOrMod ? "" : "pb-8"
           }`}
         >

components/Modal/User/ChangePassword.tsx

@@ -81,7 +81,7 @@ export default function ChangePassword({
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
       <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-sm text-sky-700 dark:text-sky-400">New Password</p>
+        <p className="text-sm text-black dark:text-white">New Password</p>
 
         <input
           value={newPassword}
@@ -90,7 +90,7 @@ export default function ChangePassword({
           placeholder="••••••••••••••"
           className="w-full rounded-md p-3 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
         />
-        <p className="text-sm text-sky-700 dark:text-sky-400">
+        <p className="text-sm text-black dark:text-white">
           Confirm New Password
         </p>
 

components/Modal/User/PrivacySettings.tsx

@@ -119,7 +119,7 @@ export default function PrivacySettings({
   return (
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div>
-        <p className="text-sm text-sky-700 mb-2">Profile Visibility</p>
+        <p className="text-sm text-black mb-2">Profile Visibility</p>
 
         <Checkbox
           label="Make profile private"
@@ -134,7 +134,7 @@ export default function PrivacySettings({
 
         {user.isPrivate && (
           <div>
-            <p className="text-sm text-sky-700 my-2">Whitelisted Users</p>
+            <p className="text-sm text-black my-2">Whitelisted Users</p>
             <p className="text-gray-500 text-sm mb-3">
               Please provide the Username of the users you wish to grant
               visibility to your profile. Separated by comma.
@@ -152,7 +152,7 @@ export default function PrivacySettings({
       </div>
 
       <div className="mt-5">
-        <p className="text-sm text-sky-700 mb-2">Import/Export Data</p>
+        <p className="text-sm text-black mb-2">Import/Export Data</p>
 
         <div className="flex gap-2">
           <div
@@ -162,7 +162,7 @@ export default function PrivacySettings({
           >
             <div
               id="import-dropdown"
-              className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+              className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
             >
               Import From
             </div>
@@ -196,7 +196,7 @@ export default function PrivacySettings({
           </div>
 
           <Link className="w-fit" href="/api/data">
-            <div className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
+            <div className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
               Export Data
             </div>
           </Link>

components/Modal/User/ProfileSettings.tsx

@@ -102,7 +102,7 @@ export default function ProfileSettings({
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
         <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 text-center">
+          <p className="text-sm text-black dark:text-white mb-2 text-center">
             Profile Photo
           </p>
           <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
@@ -129,7 +129,7 @@ export default function ProfileSettings({
               <label
                 htmlFor="upload-photo"
                 title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
               >
                 Browse...
                 <input
@@ -147,7 +147,7 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            <p className="text-sm text-black dark:text-white mb-2">
               Display Name
             </p>
             <input
@@ -159,9 +159,7 @@ export default function ProfileSettings({
           </div>
 
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            <p className="text-sm text-black dark:text-white mb-2">Username</p>
-              Username
-            </p>
             <input
               type="text"
               value={user.username || ""}
@@ -172,7 +170,7 @@ export default function ProfileSettings({
 
           {emailEnabled ? (
             <div>
-              <p className="text-sm text-sky-700 mb-2">Email</p>
+              <p className="text-sm text-black mb-2">Email</p>
               <input
                 type="text"
                 value={user.email || ""}
@@ -192,10 +190,10 @@ export default function ProfileSettings({
 
       {/* <hr /> TODO: Export functionality
 
-      <p className="text-sky-700">Data Settings</p>
+      <p className="text-black">Data Settings</p>
 
       <div className="w-fit">
-        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
+        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
           Export Data
         </div>
       </div> */}

components/Modal/User/index.tsx

@@ -27,11 +27,11 @@ export default function UserModal({
   return (
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300">
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100  duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white  duration-100 rounded-md outline-none"
                 : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-700 rounded-md duration-100 outline-none"
             }
           >
@@ -41,7 +41,7 @@ export default function UserModal({
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
                 : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
             }
           >
@@ -51,7 +51,7 @@ export default function UserModal({
           <Tab
             className={({ selected }) =>
               selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-sky-100 duration-100 rounded-md outline-none"
+                ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 dark:text-white duration-100 rounded-md outline-none"
                 : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-sky-600 rounded-md duration-100 outline-none"
             }
           >

components/Navbar.tsx

@@ -37,7 +37,7 @@ export default function Navbar() {
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-sky-800 border-b h-16">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-sky-700 rounded-md duration-100 hover:bg-slate-200"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black rounded-md duration-100 hover:bg-slate-200"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
@@ -51,7 +51,7 @@ export default function Navbar() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-black sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}

components/NoLinksFound.tsx

@@ -8,11 +8,11 @@ export default function NoLinksFound() {
 
   return (
     <div className="border border-solid border-sky-100 dark:border-sky-800 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-sky-700 dark:text-white">
+      <p className="text-center text-3xl text-black dark:text-white">
         You haven&apos;t created any Links Here
       </p>
       <br />
-      <div className="text-center text-sky-900 dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
+      <div className="text-center text-black dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
         <p>Start by creating a</p>{" "}
         <div
           onClick={() => {

components/PublicPage/LinkCard.tsx

@@ -58,8 +58,8 @@ export default function LinkCard({ link, count }: Props) {
         <div className="flex justify-between items-center gap-5 w-full h-full z-0">
           <div className="flex flex-col justify-between">
             <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
+              <p className="text-sm text-black font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700  font-bold">{link.name}</p>
+              <p className="text-lg text-black  font-bold">{link.name}</p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
@@ -70,7 +70,7 @@ export default function LinkCard({ link, count }: Props) {
                 {link.tags.map((e, i) => (
                   <p
                     key={i}
-                    className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
+                    className="px-2 py-1 bg-sky-200 text-black text-xs rounded-3xl cursor-pointer truncate max-w-[10rem]"
                   >
                     {e.name}
                   </p>
@@ -79,7 +79,7 @@ export default function LinkCard({ link, count }: Props) {
             </div>
             <div className="flex gap-2 items-center flex-wrap mt-2">
               <p className="text-gray-500">{formattedDate}</p>
-              <div className="text-sky-500 font-bold flex items-center gap-1">
+              <div className="text-black font-bold flex items-center gap-1">
                 <p>{url ? url.host : link.url}</p>
               </div>
             </div>

components/RadioButton.tsx

@@ -20,13 +20,15 @@ export default function RadioButton({ label, state, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faCircleCheck}
-        className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:block hidden"
+        className="w-5 h-5 text-black dark:text-white peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:hidden block"
+        className="w-5 h-5 text-black dark:text-white peer-checked:hidden block"
       />
-      <span className="text-sky-900 dark:text-sky-300 rounded select-none">{label}</span>
+      <span className="text-black dark:text-white rounded select-none">
+        {label}
+      </span>
     </label>
   );
 }

components/RequiredBadge.tsx

@@ -1,6 +1,9 @@
 export default function RequiredBadge() {
   return (
-    <span title="Required Field" className="text-sky-700 dark:text-sky-400 cursor-help">
+    <span
+      title="Required Field"
+      className="text-black dark:text-white cursor-help"
+    >
       {" "}
       *
     </span>

components/Search.tsx

@@ -24,7 +24,7 @@ export default function Search() {
     >
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300 group-hover:text-sky-700"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -44,7 +44,7 @@ export default function Search() {
           router.push("/search/" + encodeURIComponent(searchQuery))
         }
         autoFocus={searchBox}
-        className="border border-sky-100 dark:border-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-sky-950"
+        className="border border-sky-100 dark:border-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-300 dark:focus:border-sky-600 dark:hover:border-sky-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none dark:bg-sky-950"
       />
     </div>
   );

components/Sidebar.tsx

@@ -64,7 +64,7 @@ export default function Sidebar({ className }: { className?: string }) {
         >
           <FontAwesomeIcon
             icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
 
           <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
@@ -82,10 +82,10 @@ export default function Sidebar({ className }: { className?: string }) {
         >
           <FontAwesomeIcon
             icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
 
-          <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
             Links
           </p>
         </Link>
@@ -100,10 +100,10 @@ export default function Sidebar({ className }: { className?: string }) {
         >
           <FontAwesomeIcon
             icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-300`}
           />
 
-          <p className="text-sky-700 dark:text-sky-200 text-xs xl:text-sm font-semibold">
+          <p className="text-black dark:text-white text-xs xl:text-sm font-semibold">
             Collections
           </p>
         </Link>
@@ -114,7 +114,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setCollectionDisclosure(!collectionDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-sky-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
         >
           <p>Collections</p>
 
@@ -153,7 +153,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           style={{ color: e.color }}
                         />
 
-                        <p className="text-sky-700 dark:text-sky-200 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -164,7 +164,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
                   You Have No Collections...
                 </p>
               </div>
@@ -177,7 +177,7 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setTagDisclosure(!tagDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-sky-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-white mt-5"
         >
           <p>Tags</p>
           <FontAwesomeIcon
@@ -209,10 +209,10 @@ export default function Sidebar({ className }: { className?: string }) {
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}
-                          className="w-4 h-4 text-sky-500 mt-1"
+                          className="w-4 h-4 text-sky-500 dark:text-sky-300 mt-1"
                         />
 
-                        <p className="text-sky-700 dark:text-sky-300 truncate w-full pr-7">
+                        <p className="text-black dark:text-white truncate w-full pr-7">
                           {e.name}
                         </p>
                       </div>
@@ -223,7 +223,7 @@ export default function Sidebar({ className }: { className?: string }) {
               <div
                 className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
               >
-                <p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-white text-xs font-semibold truncate w-full pr-7">
                   You Have No Tags...
                 </p>
               </div>

components/SortDropdown.tsx

@@ -23,7 +23,7 @@ export default function SortDropdown({
       }}
       className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-48"
     >
-      <p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">
+      <p className="mb-2 text-black dark:text-white text-center font-semibold">
         Sort by
       </p>
       <div className="flex flex-col gap-2">

layouts/CenteredForm.tsx

@@ -23,7 +23,7 @@ export default function CenteredForm({ text, children }: Props) {
           </p>
         ) : undefined}
         {children}
-        <p className="text-center text-xs text-gray-500 dark:text-sky-500">
+        <p className="text-center text-xs text-gray-500 dark:text-white">
           © {new Date().getFullYear()} Linkwarden. All rights reserved.
         </p>
       </div>

pages/choose-username.tsx

@@ -45,7 +45,7 @@ export default function Subscribe() {
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Username
           </p>
 

pages/collections/[id].tsx

@@ -60,7 +60,7 @@ export default function Index() {
                     style={{ color: activeCollection?.color }}
                     className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                   />
-                  <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -116,7 +116,7 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
+          <div className="text-gray-600 dark:text-white flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
@@ -128,7 +128,7 @@ export default function Index() {
                   <FontAwesomeIcon
                     icon={faSort}
                     id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
 
@@ -150,7 +150,7 @@ export default function Index() {
                     icon={faEllipsis}
                     id="expand-dropdown"
                     title="More"
-                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
+                    className="w-5 h-5 text-gray-500 dark:text-white"
                   />
                 </div>
                 {expandDropdown ? (

pages/collections/index.tsx

@@ -39,7 +39,7 @@ export default function Collections() {
                 icon={faFolder}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 All Collections
               </p>
             </div>
@@ -52,7 +52,7 @@ export default function Collections() {
                 <FontAwesomeIcon
                   icon={faEllipsis}
                   id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500 dark:text-sky-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -91,7 +91,7 @@ export default function Collections() {
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500 dark:text-sky-500"
+                className="w-5 h-5 text-gray-500 dark:text-white"
               />
             </div>
 
@@ -120,7 +120,7 @@ export default function Collections() {
               });
             }}
           >
-            <p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
+            <p className="text-black dark:text-white group-hover:opacity-0 duration-100">
               New Collection
             </p>
             <FontAwesomeIcon

pages/confirmation.tsx

@@ -5,7 +5,7 @@ import React from "react";
 export default function EmailConfirmaion() {
   return (
     <CenteredForm>
-      <div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-sky-800">
+      <div className="p-2 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 bg-slate-50 text-black">
         <p className="text-center text-xl font-bold mb-2 text-black">
           Please check your Email
         </p>

pages/dashboard.tsx

@@ -85,7 +85,7 @@ export default function Dashboard() {
               icon={faChartSimple}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
               Dashboard
             </p>
           </div>
@@ -95,24 +95,28 @@ export default function Dashboard() {
 
         <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{numberOfLinks}</p>
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+              {numberOfLinks}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {numberOfLinks === 1 ? "Link" : "Links"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
               {collections.length}
             </p>
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+            <p className="text-black dark:text-white text-xl">
               {collections.length === 1 ? "Collection" : "Collections"}
             </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{tags.length}</p>
+            <p className="font-bold text-6xl text-sky-500 dark:text-sky-300">
-            <p className="text-sky-900 dark:text-sky-500 text-xl">
+              {tags.length}
+            </p>
+            <p className="text-black dark:text-white text-xl">
               {tags.length === 1 ? "Tag" : "Tags"}
             </p>
           </div>
@@ -131,13 +135,13 @@ export default function Dashboard() {
                   }}
                   className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
                 >
-                  <p className="text-sky-700 text-xl">Pinned Links</p>
+                  <p className="text-black text-xl">Pinned Links</p>
 
-                  <div className="text-sky-700 flex items-center gap-2">
+                  <div className="text-black flex items-center gap-2">
                     {linkPinDisclosure ? "Hide" : "Show"}
                     <FontAwesomeIcon
                       icon={faChevronDown}
-                      className={`w-4 h-4 text-sky-300 ${
+                      className={`w-4 h-4 text-black ${
                         linkPinDisclosure ? "rotate-reverse" : "rotate"
                       }`}
                     />
@@ -164,10 +168,10 @@ export default function Dashboard() {
             </Disclosure>
           ) : (
             <div className="border border-solid border-sky-100 dark:border-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
-              <p className="text-center text-2xl text-sky-700 dark:text-sky-300">
+              <p className="text-center text-2xl text-black dark:text-white">
                 No Pinned Links
               </p>
-              <p className="text-center text-sky-900 dark:text-sky-500 text-sm">
+              <p className="text-center text-black dark:text-white text-sm">
                 You can Pin Links by clicking on the three dots on each Link and
                 clicking &quot;Pin to Dashboard.&quot;
               </p>
@@ -182,13 +186,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Collections</p>
+                <p className="text-black text-xl">Pinned Collections</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {collectionPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       collectionPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -219,13 +223,13 @@ export default function Dashboard() {
                 }}
                 className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
               >
-                <p className="text-sky-700 text-xl">Pinned Tags</p>
+                <p className="text-black text-xl">Pinned Tags</p>
 
-                <div className="text-sky-700 flex items-center gap-2">
+                <div className="text-black flex items-center gap-2">
                   {tagPinDisclosure ? "Hide" : "Show"}
                   <FontAwesomeIcon
                     icon={faChevronDown}
-                    className={`w-4 h-4 text-sky-300 ${
+                    className={`w-4 h-4 text-black ${
                       tagPinDisclosure ? "rotate-reverse" : "rotate"
                     }`}
                   />
@@ -244,7 +248,7 @@ export default function Dashboard() {
                     <Link
                       href={`/tags/${e.id}`}
                       key={i}
-                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-sky-700"
+                      className="px-2 py-1 bg-sky-200 rounded-full hover:opacity-60 duration-100 text-black"
                     >
                       {e.name}
                     </Link>

pages/forgot.tsx

@@ -53,7 +53,7 @@ export default function Forgot() {
           </p>
         </div>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
 
           <input
             type="text"
@@ -71,7 +71,7 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <Link href={"/login"} className="block text-black font-bold">
             Go back
           </Link>
         </div>

pages/links.tsx

@@ -26,7 +26,7 @@ export default function Links() {
               icon={faLink}
               className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
             />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
               All Links
             </p>
           </div>

pages/login.tsx

@@ -53,7 +53,7 @@ export default function Login() {
         </p>
 
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Username
             {emailEnabled ? "/Email" : undefined}
           </p>
@@ -68,7 +68,7 @@ export default function Login() {
         </div>
 
         <div>
-          <p className="text-sm text-sky-700 dark:text-sky-300 w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Password
           </p>
 
@@ -95,8 +95,11 @@ export default function Login() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500 dark:text-sky-300">New here?</p>
+          <p className="w-fit text-gray-500 dark:text-white">New here?</p>
-          <Link href={"/register"} className="block text-sky-700 dark:text-sky-500 font-bold">
+          <Link
+            href={"/register"}
+            className="block text-black dark:text-white font-bold"
+          >
             Sign Up
           </Link>
         </div>

pages/public/collections/[id].tsx

@@ -45,7 +45,7 @@ export default function PublicCollections() {
       <div
         className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
       >
-        <p className="text-5xl text-sky-700 font-bold mb-5 capitalize">
+        <p className="text-5xl text-black font-bold mb-5 capitalize">
           {data.name}
         </p>
 
@@ -64,7 +64,7 @@ export default function PublicCollections() {
       </div>
 
       {/* <p className="text-center font-bold text-gray-500">
-        List created with <span className="text-sky-700">Linkwarden.</span>
+        List created with <span className="text-black">Linkwarden.</span>
       </p> */}
     </div>
   ) : (

pages/register.tsx

@@ -103,7 +103,7 @@ export default function Register() {
           Enter your details
         </p>
         <div>
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Display Name
           </p>
 
@@ -118,7 +118,7 @@ export default function Register() {
 
         {emailEnabled ? undefined : (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+            <p className="text-sm text-black w-fit font-semibold mb-1">
               Username
             </p>
 
@@ -134,9 +134,7 @@ export default function Register() {
 
         {emailEnabled ? (
           <div>
-            <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+            <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
-              Email
-            </p>
 
             <input
               type="email"
@@ -149,7 +147,7 @@ export default function Register() {
         ) : undefined}
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold  mb-1">
+          <p className="text-sm text-black w-fit font-semibold  mb-1">
             Password
           </p>
 
@@ -163,7 +161,7 @@ export default function Register() {
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-sky-700 w-fit font-semibold mb-1">
+          <p className="text-sm text-black w-fit font-semibold mb-1">
             Confirm Password
           </p>
 
@@ -215,7 +213,7 @@ export default function Register() {
         />
         <div className="flex items-baseline gap-1 justify-center">
           <p className="w-fit text-gray-500">Already have an account?</p>
-          <Link href={"/login"} className="block text-sky-700 font-bold">
+          <Link href={"/login"} className="block text-black font-bold">
             Login
           </Link>
         </div>

pages/search/[query].tsx

@@ -40,9 +40,9 @@ export default function Links() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 Search Results
               </p>
             </div>
@@ -99,9 +99,9 @@ export default function Links() {
             return <LinkCard key={i} link={e} count={i} />;
           })
         ) : (
-          <p className="text-sky-900">
+          <p className="text-black dark:text-white">
             Nothing found.{" "}
-            <span className="text-sky-700 font-bold text-xl" title="Shruggie">
+            <span className="font-bold text-xl" title="Shruggie">
               ¯\_(ツ)_/¯
             </span>
           </p>

pages/tags/[id].tsx

@@ -38,7 +38,7 @@ export default function Index() {
                 icon={faHashtag}
                 className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300"
               />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-500 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white font-bold">
                 {activeTag?.name}
               </p>
             </div>