much better coloring

components/CollectionCard.tsx

@@ -32,24 +32,24 @@ export default function CollectionCard({ collection, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
+      className={`bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
     >
       <div
         onClick={() => setExpandDropdown(!expandDropdown)}
         id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
+        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
       >
         <FontAwesomeIcon
           icon={faEllipsis}
           id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500 dark:text-white"
+          className="w-5 h-5 text-gray-500 dark:text-gray-300"
         />
       </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-black dark:text-white break-words line-clamp-3 w-4/5">
+        <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
           {collection.name}
         </p>
         <div className="flex justify-between items-center">

components/Dropdown.tsx

@@ -25,12 +25,12 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-sky-900 rounded-md flex flex-col z-20`}
+      className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         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">
+            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
               <p className="text-black dark:text-white select-none">{e.name}</p>
             </div>
           </div>

components/FilterSearchDropdown.tsx

@@ -20,7 +20,7 @@ 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 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-sky-900 rounded-md p-2 z-20 w-40"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
     >
       <p className="mb-2 text-black dark:text-white text-center font-semibold">
         Filter by

components/InputSelect/CollectionSelection.tsx

@@ -45,6 +45,8 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
   return (
     <Select
       isClearable
+      className="react-select-container"
+      classNamePrefix="react-select"
       placeholder="Default: Unnamed Collection"
       onChange={onChange}
       options={options}

components/InputSelect/TagSelection.tsx

@@ -28,6 +28,8 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
   return (
     <CreatableSelect
       isClearable
+      className="react-select-container"
+      classNamePrefix="react-select"
       onChange={onChange}
       options={options}
       styles={styles}

components/LinkCard.tsx

@@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {
 
   return (
     <div
-      className={`bg-gradient-to-tr from-slate-200 dark:from-sky-800 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
+      className={`bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
     >
       {(permissions === true ||
         permissions?.canUpdate ||
@@ -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-white 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-gray-300 inline-flex rounded-md cursor-pointer hover:bg-slate-200 dark:hover:bg-neutral-700 absolute right-5 top-5 z-10 duration-100 p-1"
         >
           <FontAwesomeIcon
             icon={faEllipsis}
@@ -156,10 +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-black dark:text-white font-bold">
-                {count + 1}.
+              <p className="text-sm text-gray-500 dark:text-gray-300">
+                {count + 1}
               </p>
-              <p className="text-lg text-black dark:text-white font-bold truncate capitalize w-full pr-8">
+              <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
                 {link.name || link.description}
               </p>
             </div>
@@ -175,11 +175,11 @@ export default function LinkCard({ link, count, className }: Props) {
                 </p>
               </div>
             </div>
-            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-white">
+            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-gray-300">
               <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-white">
+            <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
               <p>{formattedDate}</p>
             </div>

components/Modal/Collection/CollectionInfo.tsx

@@ -72,7 +72,7 @@ export default function CollectionInfo({
               }
               type="text"
               placeholder="e.g. Example Collection"
-              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
@@ -86,7 +86,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white 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 hover:dark:bg-neutral-700 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -105,7 +105,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <p className="text-sm text-black dark:text-white mb-2">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"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-3 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Collection/DeleteCollection.tsx

@@ -83,7 +83,7 @@ export default function DeleteCollection({
           <div className="flex flex-col gap-3">
             <p className="text-black dark:text-white select-none text-center">
               To confirm, type &quot;
-              <span className="font-bold text-black">{collection.name}</span>
+              <span className="font-bold">{collection.name}</span>
               &quot; in the box below:
             </p>
 
@@ -93,7 +93,7 @@ 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 dark:border-sky-800 dark:bg-sky-950 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-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 dark:bg-neutral-900 border-solid border outline-none duration-100"
             />
           </div>
         </>
@@ -107,9 +107,9 @@ export default function DeleteCollection({
         className={`mx-auto mt-2 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold duration-100 ${
           permissions === true
             ? inputField === collection.name
-              ? "bg-red-500 hover:bg-red-400 cursor-pointer"
-              : "cursor-not-allowed bg-red-300"
-            : "bg-red-500 hover:bg-red-400 cursor-pointer"
+              ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
+              : "cursor-not-allowed bg-red-300 dark:bg-red-900"
+            : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
         }`}
         onClick={submit}
       >

components/Modal/Collection/TeamManagement.tsx

@@ -148,7 +148,7 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none hover:border-sky-700 duration-100 cursor-text"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-3 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -183,7 +183,7 @@ export default function TeamManagement({
               }
               type="text"
               placeholder="Username (without the '@')"
-              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-3 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
             />
 
             <div
@@ -215,7 +215,7 @@ export default function TeamManagement({
                 return (
                   <div
                     key={i}
-                    className="relative border p-2 rounded-md border-sky-100 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
                       <FontAwesomeIcon
@@ -244,7 +244,9 @@ export default function TeamManagement({
                         <p className="text-sm font-bold text-black dark:text-white">
                           {e.user.name}
                         </p>
-                        <p className="text-black">@{e.user.username}</p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
                       </div>
                     </div>
                     <div className="flex sm:block items-center gap-5 min-w-[10rem]">
@@ -307,11 +309,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Create
                             </span>
@@ -352,11 +354,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Update
                             </span>
@@ -397,11 +399,11 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-700 text-sm ${
+                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
-                                  ? "hover:bg-slate-200 duration-75"
+                                  ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-75"
                                   : ""
-                              } peer-checked:text-white rounded p-1 select-none`}
+                              } rounded p-1 select-none`}
                             >
                               Delete
                             </span>
@@ -417,13 +419,13 @@ export default function TeamManagement({
       )}
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 dark:border-sky-800 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2">
           <ProfilePhoto
             src={`/api/avatar/${collection.ownerId}?${Date.now()}`}
-            className="border-[3px] dark:border-sky-800"
+            className="border-[3px]"
           />
           <div>
             <div className="flex items-center gap-1">
@@ -435,7 +437,7 @@ export default function TeamManagement({
                 className="w-3 h-3 text-yellow-500"
               />
             </div>
-            <p className="text-black dark:text-white">
+            <p className="text-gray-500 dark:text-gray-300">
               @{collectionOwner.username}
             </p>
           </div>

components/Modal/Collection/index.tsx

@@ -58,7 +58,7 @@ export default function CollectionModal({
                   className={({ selected }) =>
                     selected
                       ? "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-white rounded-md duration-100 outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                   }
                 >
                   Collection Info
@@ -68,7 +68,7 @@ export default function CollectionModal({
                 className={({ selected }) =>
                   selected
                     ? "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-white rounded-md duration-100 outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Share & Collaborate" : "View Team"}
@@ -77,7 +77,7 @@ export default function CollectionModal({
                 className={({ selected }) =>
                   selected
                     ? "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-white rounded-md duration-100 outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                 }
               >
                 {isOwner ? "Delete Collection" : "Leave Collection"}

components/Modal/Link/AddOrEditLink.tsx

@@ -115,7 +115,7 @@ export default function AddOrEditLink({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {method === "UPDATE" ? (
         <p
-          className="text-gray-500 my-2 text-center truncate w-full"
+          className="text-gray-500 dark:text-gray-300 my-2 text-center truncate w-full"
           title={link.url}
         >
           <Link href={link.url} target="_blank" className="font-bold">
@@ -135,11 +135,11 @@ export default function AddOrEditLink({
             onChange={(e) => setLink({ ...link, url: e.target.value })}
             type="text"
             placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
           />
         </div>
       ) : null}
-      <hr className="dark:border-sky-800" />
+      <hr className="dark:border-neutral-700" />
       <div className="grid sm:grid-cols-2 gap-3">
         <div>
           <p className="text-sm text-black dark:text-white mb-2">Collection</p>
@@ -177,7 +177,7 @@ export default function AddOrEditLink({
             onChange={(e) => setLink({ ...link, name: e.target.value })}
             type="text"
             placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
           />
         </div>
 
@@ -191,7 +191,7 @@ export default function AddOrEditLink({
                 ? "Will be auto generated if nothing is provided."
                 : ""
             }
-            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-sky-950"
+            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-900"
           />
         </div>
       </div>

components/Modal/Link/LinkDetails.tsx

@@ -20,12 +20,15 @@ import {
   faFilePdf,
 } from "@fortawesome/free-regular-svg-icons";
 import isValidUrl from "@/lib/client/isValidUrl";
+import { useTheme } from "next-themes";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
 };
 
 export default function LinkDetails({ link }: Props) {
+  const { theme, setTheme } = useTheme();
+
   const [imageError, setImageError] = useState<boolean>(false);
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
     "en-US",
@@ -71,6 +74,9 @@ export default function LinkDetails({ link }: Props) {
   useEffect(() => {
     const banner = document.getElementById("link-banner");
     const bannerInner = document.getElementById("link-banner-inner");
+    const bannerOut = document.getElementById("link-banner-outside");
+
+    if (theme === "dark") bannerOut?.classList.toggle("banner-dark-mode");
 
     if (colorPalette && banner && bannerInner) {
       banner.style.background = `linear-gradient(to right, ${rgbToHex(
@@ -93,7 +99,7 @@ export default function LinkDetails({ link }: Props) {
         colorPalette[3][2]
       )})`;
     }
-  }, [colorPalette]);
+  }, [colorPalette, theme]);
 
   const handleDownload = (format: "png" | "pdf") => {
     const path = `/api/archives/${link.collection.id}/${link.id}.${format}`;
@@ -115,7 +121,10 @@ export default function LinkDetails({ link }: Props) {
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+    <div
+      id="link-banner-outside"
+      className="flex flex-col gap-3 sm:w-[35rem] w-80"
+    >
       {!imageError && (
         <div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
           <div id="link-banner-inner" className="link-banner-inner"></div>
@@ -131,7 +140,7 @@ export default function LinkDetails({ link }: Props) {
             height={42}
             alt=""
             id={"favicon-" + link.id}
-            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-sky-800 bg-white dark:bg-sky-950 aspect-square"
+            className="select-none mt-2 rounded-md shadow border-[3px] border-white dark:border-neutral-900 bg-white dark:bg-neutral-900 aspect-square"
             draggable="false"
             onLoad={(e) => {
               try {
@@ -158,7 +167,7 @@ export default function LinkDetails({ link }: Props) {
             href={link.url}
             target="_blank"
             rel="noreferrer"
-            className="text-sm text-gray-500 dark:text-white break-all hover:underline cursor-pointer w-fit"
+            className="text-sm text-gray-500 dark:text-gray-300 break-all hover:underline cursor-pointer w-fit"
           >
             {url ? url.host : link.url}
           </Link>
@@ -185,7 +194,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-black 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 dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
             >
               {e.name}
             </p>
@@ -194,19 +203,19 @@ export default function LinkDetails({ link }: Props) {
       </div>
       {link.description && (
         <>
-          <div className="text-gray-500 dark:text-white max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
+          <div className="text-black 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-white">
+        <div className="flex items-center gap-1 text-gray-500 dark:text-gray-300">
           <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-white"
+          className="flex items-center gap-1 text-gray-500 dark:text-gray-300"
           title={"Created at: " + formattedDate}
         >
           <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
@@ -214,7 +223,7 @@ export default function LinkDetails({ link }: Props) {
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
@@ -223,32 +232,32 @@ export default function LinkDetails({ link }: Props) {
             <p className="text-gray-500 dark:text-white">Screenshot</p>
           </div>
 
-          <div className="flex text-black gap-1">
+          <div className="flex text-black dark:text-white gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
+                className="w-5 h-5 text-sky-500 dark:text-sky-300"
               />
             </Link>
 
             <div
               onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
               />
             </div>
           </div>
         </div>
 
-        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-sky-800 rounded-md">
+        <div className="flex justify-between items-center p-2 border border-sky-100 dark:border-neutral-700 rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
@@ -257,26 +266,26 @@ export default function LinkDetails({ link }: Props) {
             <p className="text-gray-500 dark:text-white">PDF</p>
           </div>
 
-          <div className="flex text-black gap-1">
+          <div className="flex text-black dark:text-white gap-1">
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
               rel="noreferrer"
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                className="w-5 h-5"
+                className="w-5 h-5 text-sky-500 dark:text-sky-300"
               />
             </Link>
 
             <div
               onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 duration-100 p-2 rounded-md"
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
             >
               <FontAwesomeIcon
                 icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer"
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-300"
               />
             </div>
           </div>

components/Modal/Link/index.tsx

@@ -47,8 +47,8 @@ export default function LinkModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
                 }
               >
                 Link Details
@@ -56,8 +56,8 @@ export default function LinkModal({
               <Tab
                 className={({ selected }) =>
                   selected
-                    ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-600 duration-100 rounded-md outline-none"
+                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
                 }
               >
                 Edit Link

components/Modal/User/BillingPortal.tsx

@@ -18,7 +18,7 @@ export default function PaymentPortal() {
   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-md text-gray-500">
+        <p className="text-md text-gray-500 dark:text-gray-400">
           To manage/cancel your subsciption, visit the billing portal.
         </p>
 
@@ -30,10 +30,13 @@ export default function PaymentPortal() {
           className="mx-auto mt-2"
         />
 
-        <p className="text-md text-gray-500">
+        <p className="text-md text-gray-500 dark:text-gray-400">
           If you still need help or encountered any issues, feel free to reach
           out to us at:{" "}
-          <a className="font-semibold" href="mailto:support@linkwarden.app">
+          <a
+            className="font-semibold underline"
+            href="mailto:support@linkwarden.app"
+          >
             support@linkwarden.app
           </a>
         </p>

components/Modal/User/ChangePassword.tsx

@@ -88,7 +88,7 @@ export default function ChangePassword({
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
           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"
+          className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
         />
         <p className="text-sm text-black dark:text-white">
           Confirm New Password
@@ -99,7 +99,7 @@ export default function ChangePassword({
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
           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"
+          className="w-full rounded-md p-3 mx-auto dark:bg-neutral-900 border-solid border outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 duration-100"
         />
 
         <SubmitButton

components/Modal/User/PrivacySettings.tsx

@@ -119,7 +119,9 @@ 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-black mb-2">Profile Visibility</p>
+        <p className="text-sm text-black dark:text-white mb-2">
+          Profile Visibility
+        </p>
 
         <Checkbox
           label="Make profile private"
@@ -128,19 +130,21 @@ export default function PrivacySettings({
           onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
         />
 
-        <p className="text-gray-500 text-sm">
+        <p className="text-gray-500 dark:text-gray-300 text-sm">
           This will limit who can find and add you to other Collections.
         </p>
 
         {user.isPrivate && (
           <div>
-            <p className="text-sm text-black my-2">Whitelisted Users</p>
-            <p className="text-gray-500 text-sm mb-3">
+            <p className="text-sm text-black dark:text-white mt-2">
+              Whitelisted Users
+            </p>
+            <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
               Please provide the Username of the users you wish to grant
               visibility to your profile. Separated by comma.
             </p>
             <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-700"
+              className="w-full resize-none border rounded-md duration-100 bg-white dark:bg-neutral-900 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
               placeholder="Your profile is hidden from everyone right now..."
               value={whitelistedUsersTextbox}
               onChange={(e) => {
@@ -152,7 +156,9 @@ export default function PrivacySettings({
       </div>
 
       <div className="mt-5">
-        <p className="text-sm text-black mb-2">Import/Export Data</p>
+        <p className="text-sm text-black dark:text-white mb-2">
+          Import/Export Data
+        </p>
 
         <div className="flex gap-2">
           <div
@@ -162,7 +168,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-black duration-100 hover:border-sky-700"
+              className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
             >
               Import From
             </div>
@@ -172,13 +178,13 @@ export default function PrivacySettings({
                   const target = e.target as HTMLInputElement;
                   if (target.id !== "import-dropdown") setImportDropdown(false);
                 }}
-                className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
+                className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
               >
                 <div className="cursor-pointer rounded-md">
                   <label
                     htmlFor="import-file"
                     title="JSON"
-                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100 cursor-pointer"
+                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
                   >
                     Linkwarden
                     <input
@@ -196,7 +202,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-black duration-100 hover:border-sky-700">
+            <div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
               Export Data
             </div>
           </Link>

components/Modal/User/ProfileSettings.tsx

@@ -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-black duration-100 hover:border-sky-700"
+                className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
               >
                 Browse...
                 <input
@@ -154,7 +154,7 @@ export default function ProfileSettings({
               type="text"
               value={user.name}
               onChange={(e) => setUser({ ...user, name: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
             />
           </div>
 
@@ -164,7 +164,7 @@ export default function ProfileSettings({
               type="text"
               value={user.username || ""}
               onChange={(e) => setUser({ ...user, username: e.target.value })}
-              className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-sky-950 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
             />
           </div>
 

components/Modal/User/index.tsx

@@ -32,7 +32,7 @@ export default function UserModal({
             className={({ selected }) =>
               selected
                 ? "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"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
             }
           >
             Profile Settings
@@ -42,7 +42,7 @@ export default function UserModal({
             className={({ selected }) =>
               selected
                 ? "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"
+                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
             }
           >
             Privacy Settings
@@ -52,7 +52,7 @@ export default function UserModal({
             className={({ selected }) =>
               selected
                 ? "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"
+                : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
             }
           >
             Password
@@ -62,8 +62,8 @@ export default function UserModal({
             <Tab
               className={({ selected }) =>
                 selected
-                  ? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
-                  : "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
+                  ? "px-2 py-1 bg-sky-200 dark:bg-sky-500 duration-100 rounded-md outline-none"
+                  : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
               }
             >
               Billing Portal

components/Modal/index.tsx

@@ -16,10 +16,10 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className}`}
       >
-        <div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-sky-950">
+        <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"
           >
             <FontAwesomeIcon
               icon={faChevronLeft}

components/Navbar.tsx

@@ -9,8 +9,8 @@ import { useRouter } from "next/router";
 import Search from "@/components/Search";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
-import ToggleDarkMode from "@/components/ToggleDarkMode";
 import useModalStore from "@/store/modals";
+import { useTheme } from "next-themes";
 
 export default function Navbar() {
   const { setModal } = useModalStore();
@@ -23,6 +23,16 @@ export default function Navbar() {
 
   const router = useRouter();
 
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
   window.addEventListener("resize", () => setSidebar(false));
 
   useEffect(() => {
@@ -34,10 +44,10 @@ export default function Navbar() {
   };
 
   return (
-    <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 className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-neutral-700 border-b h-16">
       <div
         onClick={toggleSidebar}
-        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"
+        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-black dark:text-white rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
@@ -51,7 +61,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-black 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 dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-sky-500 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}
@@ -61,16 +71,15 @@ export default function Navbar() {
             New Link
           </span>
         </div>
-        <ToggleDarkMode />
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-sky-900 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-sky-950 cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-neutral-700 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
             <ProfilePhoto
               src={account.profilePic}
-              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-sky-800"
+              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
             />
             <p
               id="profile-dropdown"
@@ -93,6 +102,13 @@ export default function Navbar() {
                     setProfileDropdown(!profileDropdown);
                   },
                 },
+                {
+                  name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,
+                  onClick: () => {
+                    handleToggle();
+                    setProfileDropdown(!profileDropdown);
+                  },
+                },
                 {
                   name: "Logout",
                   onClick: () => {

components/NoLinksFound.tsx

@@ -7,7 +7,7 @@ export default function NoLinksFound() {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-sky-800 w-full p-10 rounded-2xl">
+    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full p-10 rounded-2xl">
       <p className="text-center text-3xl text-black dark:text-white">
         You haven&apos;t created any Links Here
       </p>

components/ProfilePhoto.tsx

@@ -33,7 +33,7 @@ export default function ProfilePhoto({
 
   return error || !src ? (
     <div
-      className={`bg-sky-500 dark:bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
     >
       <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
     </div>
@@ -43,7 +43,7 @@ export default function ProfilePhoto({
       src={src}
       height={112}
       width={112}
-      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 ${className}`}
+      className={`h-10 w-10 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
     />
   );
 }

components/PublicPage/LinkCard.tsx

@@ -58,8 +58,10 @@ 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-black font-bold">{count + 1}.</p>
-              <p className="text-lg text-black  font-bold">{link.name}</p>
+              <p className="text-xs text-gray-500">{count + 1}</p>
+              <p className="text-lg text-black">
+                {link.name || link.description}
+              </p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
@@ -79,7 +81,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-black font-bold flex items-center gap-1">
+              <div className="text-black flex items-center gap-1">
                 <p>{url ? url.host : link.url}</p>
               </div>
             </div>

components/RadioButton.tsx

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

components/Search.tsx

@@ -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-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"
+        className="border border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 dark:hover:border-neutral-600 md:focus:w-80 hover:border-sky-300 duration-100 outline-none bg-inherit"
       />
     </div>
   );

components/Sidebar.tsx

@@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-sky-900 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-sky-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
@@ -59,7 +59,7 @@ export default function Sidebar({ className }: { className?: string }) {
           className={`${
             active === "/dashboard"
               ? "bg-sky-200 dark:bg-sky-600"
-              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
@@ -77,7 +77,7 @@ export default function Sidebar({ className }: { className?: string }) {
           className={`${
             active === "/links"
               ? "bg-sky-200 dark:bg-sky-600"
-              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
@@ -95,7 +95,7 @@ export default function Sidebar({ className }: { className?: string }) {
           className={`${
             active === "/collections"
               ? "bg-sky-200 dark:bg-sky-600"
-              : "hover:bg-slate-200 hover:dark:bg-sky-800"
+              : "hover:bg-slate-200 hover:dark:bg-neutral-700"
           } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
         >
           <FontAwesomeIcon
@@ -144,7 +144,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         className={`${
                           active === `/collections/${e.id}`
                             ? "bg-sky-200 dark:bg-sky-700 "
-                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-sky-900"
+                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
@@ -204,7 +204,7 @@ export default function Sidebar({ className }: { className?: string }) {
                         className={`${
                           active === `/tags/${e.id}`
                             ? "bg-sky-200 dark:bg-sky-700"
-                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-sky-900"
+                            : "hover:bg-slate-200 hover:dark:bg-neutral-700"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon

components/SortDropdown.tsx

@@ -21,7 +21,7 @@ export default function SortDropdown({
         const target = e.target as HTMLInputElement;
         if (target.id !== "sort-dropdown") toggleSortDropdown();
       }}
-      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"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-48"
     >
       <p className="mb-2 text-black dark:text-white text-center font-semibold">
         Sort by

components/SubmitButton.tsx

@@ -21,7 +21,7 @@ export default function SubmitButton({
       className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
         loading
           ? "bg-sky-600 cursor-auto"
-          : "bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 hover:dark:bg-sky-300 cursor-pointer"
+          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
       } ${className}`}
       onClick={() => {
         if (!loading) onClick();

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-white">
+        <p className="text-center text-xs text-gray-500 dark:text-gray-400">
           © {new Date().getFullYear()} Linkwarden. All rights reserved.
         </p>
       </div>

pages/_app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "@/styles/globals.css";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
@@ -14,6 +14,10 @@ export default function App({
 }: AppProps<{
   session: Session;
 }>) {
+  useEffect(() => {
+    if (!localStorage.getItem("theme")) localStorage.setItem("theme", "light");
+  }, []);
+
   return (
     <SessionProvider session={pageProps.session}>
       <Head>
@@ -38,13 +42,16 @@ export default function App({
         />
         <link rel="manifest" href="/site.webmanifest" />
       </Head>
+      <AuthRedirect>
+        <ThemeProvider attribute="class">
           <Toaster
             position="top-center"
             reverseOrder={false}
-        toastOptions={{ className: "border border-sky-100" }}
+            toastOptions={{
+              className:
+                "border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+            }}
           />
-      <AuthRedirect>
-        <ThemeProvider attribute="class">
           <Component {...pageProps} />
         </ThemeProvider>
       </AuthRedirect>

pages/choose-username.tsx

@@ -39,13 +39,13 @@ export default function Subscribe() {
 
   return (
     <CenteredForm>
-      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-center text-black font-bold">
+      <div className="p-4 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-center text-black dark:text-white font-bold">
           Choose a Username (Last step)
         </p>
 
         <div>
-          <p className="text-sm text-black w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Username
           </p>
 
@@ -54,13 +54,16 @@ export default function Subscribe() {
             placeholder="john"
             value={inputedUsername}
             onChange={(e) => setInputedUsername(e.target.value)}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 duration-100"
           />
         </div>
         <div>
-          <p className="text-md text-gray-500 mt-1">
+          <p className="text-md text-gray-500 dark:text-gray-400 mt-1">
             Feel free to reach out to us at{" "}
-            <a className="font-semibold" href="mailto:support@linkwarden.app">
+            <a
+              className="font-semibold underline"
+              href="mailto:support@linkwarden.app"
+            >
               support@linkwarden.app
             </a>{" "}
             in case of any issues.
@@ -76,7 +79,7 @@ export default function Subscribe() {
 
         <div
           onClick={() => signOut()}
-          className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
+          className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
         >
           Sign Out
         </div>

pages/collections/[id].tsx

@@ -50,7 +50,7 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             {activeCollection && (
               <div className="flex gap-3 items-center">
@@ -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-black dark:text-white font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white w-full py-1 break-words hyphens-auto">
                     {activeCollection?.name}
                   </p>
                 </div>
@@ -116,14 +116,14 @@ export default function Index() {
             ) : null}
           </div>
 
-          <div className="text-gray-600 dark:text-white flex justify-between items-end gap-5">
+          <div className="text-gray-500 dark:text-gray-300 flex justify-between items-end gap-5">
             <p>{activeCollection?.description}</p>
             <div className="flex items-center gap-2">
               <div className="relative">
                 <div
                   onClick={() => setSortDropdown(!sortDropdown)}
                   id="sort-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faSort}
@@ -144,7 +144,7 @@ export default function Index() {
                 <div
                   onClick={() => setExpandDropdown(!expandDropdown)}
                   id="expand-dropdown"
-                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                  className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
                 >
                   <FontAwesomeIcon
                     icon={faEllipsis}

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-black dark:text-white font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 All Collections
               </p>
             </div>
@@ -47,7 +47,7 @@ export default function Collections() {
               <div
                 onClick={() => setExpandDropdown(!expandDropdown)}
                 id="expand-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faEllipsis}
@@ -86,7 +86,7 @@ export default function Collections() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
@@ -111,7 +111,7 @@ export default function Collections() {
           })}
 
           <div
-            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
             onClick={() => {
               setModal({
                 modal: "COLLECTION",

pages/confirmation.tsx

@@ -5,18 +5,18 @@ 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-black">
-        <p className="text-center text-xl font-bold mb-2 text-black">
+      <div className="p-4 sm:w-[30rem] w-80 rounded-2xl shadow-md m-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 text-black dark:text-white dark:bg-neutral-800">
+        <p className="text-center text-xl font-bold mb-2">
           Please check your Email
         </p>
         <p>A sign in link has been sent to your email address.</p>
         <p>You can safely close this page.</p>
 
-        <hr className="my-5" />
+        <hr className="my-5 dark:border-neutral-700" />
 
-        <p className="text-sm text-gray-500 ">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
           If you didn&apos;t receive anything, go to the{" "}
-          <Link href="/forgot" className="font-bold">
+          <Link href="/forgot" className="font-bold underline">
             Password Recovery
           </Link>{" "}
           page and enter your Email to resend the sign in link.

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-black dark:text-white font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
               Dashboard
             </p>
           </div>
@@ -133,15 +133,17 @@ export default function Dashboard() {
                   onClick={() => {
                     setLinkPinDisclosure(!linkPinDisclosure);
                   }}
-                  className="flex justify-between gap-2 items-baseline shadow active:shadow-inner duration-100 py-2 px-4 rounded-full"
+                  className="flex justify-between gap-2 items-baseline shadow active:shadow-inner dark:bg-neutral-700 duration-100 py-2 px-4 rounded-full"
                 >
-                  <p className="text-black text-xl">Pinned Links</p>
+                  <p className="text-black dark:text-white text-xl">
+                    Pinned Links
+                  </p>
 
-                  <div className="text-black flex items-center gap-2">
+                  <div className="text-black dark:text-white flex items-center gap-2">
                     {linkPinDisclosure ? "Hide" : "Show"}
                     <FontAwesomeIcon
                       icon={faChevronDown}
-                      className={`w-4 h-4 text-black ${
+                      className={`w-4 h-4 text-black dark:text-white ${
                         linkPinDisclosure ? "rotate-reverse" : "rotate"
                       }`}
                     />
@@ -167,7 +169,7 @@ export default function Dashboard() {
               </div>
             </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">
+            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
               <p className="text-center text-2xl text-black dark:text-white">
                 No Pinned Links
               </p>

pages/forgot.tsx

@@ -40,27 +40,31 @@ export default function Forgot() {
 
   return (
     <CenteredForm>
-      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-black font-bold">Password Recovery</p>
+      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <p className="text-2xl text-black dark:text-white font-bold">
+          Password Recovery
+        </p>
         <div>
-          <p className="text-md text-black">
+          <p className="text-md text-black dark:text-white">
             Enter your Email so we can send you a link to recover your account.
             Make sure to change your password in the profile settings
             afterwards.
           </p>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
             You wont get logged in if you haven&apos;t created an account yet.
           </p>
         </div>
         <div>
-          <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+            Email
+          </p>
 
           <input
             type="text"
             placeholder="johnny@example.com"
             value={form.email}
             onChange={(e) => setForm({ ...form, email: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none dark:focus:border-sky-600 dark:border-neutral-700 dark:bg-neutral-900 focus:border-sky-700 duration-100"
           />
         </div>
 
@@ -71,7 +75,10 @@ export default function Forgot() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <Link href={"/login"} className="block text-black font-bold">
+          <Link
+            href={"/login"}
+            className="block text-black dark:text-white 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-black dark:text-white font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
               All Links
             </p>
           </div>
@@ -35,7 +35,7 @@ export default function Links() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}

pages/login.tsx

@@ -47,7 +47,7 @@ export default function Login() {
 
   return (
     <CenteredForm text="Sign in to your account">
-      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-sky-950 rounded-2xl shadow-md border border-sky-100 dark:border-sky-800">
+      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
         <p className="text-2xl text-black dark:text-white text-center font-bold">
           Enter your credentials
         </p>
@@ -63,7 +63,7 @@ export default function Login() {
             placeholder="johnny"
             value={form.username}
             onChange={(e) => setForm({ ...form, username: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
           />
         </div>
 
@@ -77,11 +77,14 @@ export default function Login() {
             placeholder="••••••••••••••"
             value={form.password}
             onChange={(e) => setForm({ ...form, password: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-sky-800 dark:bg-sky-800 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-300 dark:focus:border-sky-600 duration-100"
           />
           {emailEnabled && (
             <div className="w-fit ml-auto mt-1">
-              <Link href={"/forgot"} className="text-gray-500 font-semibold">
+              <Link
+                href={"/forgot"}
+                className="text-gray-500 dark:text-gray-400 font-semibold"
+              >
                 Forgot Password?
               </Link>
             </div>
@@ -95,10 +98,10 @@ export default function Login() {
           loading={submitLoader}
         />
         <div className="flex items-baseline gap-1 justify-center">
-          <p className="w-fit text-gray-500 dark:text-white">New here?</p>
+          <p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
           <Link
             href={"/register"}
-            className="block text-black dark:text-white font-bold"
+            className="block text-black dark:text-white font-semibold"
           >
             Sign Up
           </Link>

pages/public/collections/[id].tsx

@@ -45,9 +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-black font-bold mb-5 capitalize">
-          {data.name}
-        </p>
+        <p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
 
         {data.description && (
           <>

pages/register.tsx

@@ -98,12 +98,12 @@ export default function Register() {
           : "Create a new account"
       }
     >
-      <div className="p-2 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
-        <p className="text-2xl text-black text-center font-bold">
+      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <p className="text-2xl text-black dark:text-white text-center font-bold">
           Enter your details
         </p>
         <div>
-          <p className="text-sm text-black w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Display Name
           </p>
 
@@ -112,13 +112,13 @@ export default function Register() {
             placeholder="Johnny"
             value={form.name}
             onChange={(e) => setForm({ ...form, name: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
           />
         </div>
 
         {emailEnabled ? undefined : (
           <div>
-            <p className="text-sm text-black w-fit font-semibold mb-1">
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
               Username
             </p>
 
@@ -127,27 +127,29 @@ export default function Register() {
               placeholder="john"
               value={form.username}
               onChange={(e) => setForm({ ...form, username: e.target.value })}
-              className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
             />
           </div>
         )}
 
         {emailEnabled ? (
           <div>
-            <p className="text-sm text-black w-fit font-semibold mb-1">Email</p>
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Email
+            </p>
 
             <input
               type="email"
               placeholder="johnny@example.com"
               value={form.email}
               onChange={(e) => setForm({ ...form, email: e.target.value })}
-              className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
             />
           </div>
         ) : undefined}
 
         <div className="w-full">
-          <p className="text-sm text-black w-fit font-semibold  mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold  mb-1">
             Password
           </p>
 
@@ -156,12 +158,12 @@ export default function Register() {
             placeholder="••••••••••••••"
             value={form.password}
             onChange={(e) => setForm({ ...form, password: e.target.value })}
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
           />
         </div>
 
         <div className="w-full">
-          <p className="text-sm text-black w-fit font-semibold mb-1">
+          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
             Confirm Password
           </p>
 
@@ -172,31 +174,34 @@ export default function Register() {
             onChange={(e) =>
               setForm({ ...form, passwordConfirmation: e.target.value })
             }
-            className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 mx-auto border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 dark:focus:border-sky-600 duration-100"
           />
         </div>
 
         {process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE ? (
           <div>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               By signing up, you agree to our{" "}
-              <Link href="https://linkwarden.app/tos" className="font-semibold">
+              <Link
+                href="https://linkwarden.app/tos"
+                className="font-semibold underline"
+              >
                 Terms of Service
               </Link>{" "}
               and{" "}
               <Link
                 href="https://linkwarden.app/privacy-policy"
-                className="font-semibold"
+                className="font-semibold underline"
               >
                 Privacy Policy
               </Link>
               .
             </p>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
               Need help?{" "}
               <Link
                 href="mailto:support@linkwarden.app"
-                className="font-semibold"
+                className="font-semibold underline"
               >
                 Get in touch
               </Link>
@@ -212,8 +217,13 @@ export default function Register() {
           loading={submitLoader}
         />
         <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-black font-bold">
+          <p className="w-fit text-gray-500 dark:text-gray-400">
+            Already have an account?
+          </p>
+          <Link
+            href={"/login"}
+            className="block text-black dark:text-white font-bold"
+          >
             Login
           </Link>
         </div>

pages/search/[query].tsx

@@ -42,7 +42,7 @@ export default function Links() {
                 icon={faSearch}
                 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-black dark:text-white font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 Search Results
               </p>
             </div>
@@ -53,12 +53,12 @@ export default function Links() {
               <div
                 onClick={() => setFilterDropdown(!filterDropdown)}
                 id="filter-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faFilter}
                   id="filter-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 
@@ -75,12 +75,12 @@ export default function Links() {
               <div
                 onClick={() => setSortDropdown(!sortDropdown)}
                 id="sort-dropdown"
-                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+                className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
               >
                 <FontAwesomeIcon
                   icon={faSort}
                   id="sort-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-white"
                 />
               </div>
 

pages/subscribe.tsx

@@ -28,10 +28,11 @@ export default function Subscribe() {
     <CenteredForm
       text={`${
         process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-      }-Day free trial, then $
-    ${process.env.NEXT_PUBLIC_PRICING}/month afterwards`}
+      }-Day free trial, then $${
+        process.env.NEXT_PUBLIC_PRICING
+      }/month afterwards`}
     >
-      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 rounded-2xl shadow-md border border-sky-100">
+      <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] dark:border-neutral-700 w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
         <p className="text-2xl text-center font-bold">
           Subscribe to Linkwarden!
         </p>
@@ -56,7 +57,7 @@ export default function Subscribe() {
 
         <div
           onClick={() => signOut()}
-          className="w-fit mx-auto cursor-pointer text-gray-500 font-semibold "
+          className="w-fit mx-auto cursor-pointer text-gray-500 dark:text-gray-400 font-semibold "
         >
           Sign Out
         </div>

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-black dark:text-white font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-black dark:text-white">
                 {activeTag?.name}
               </p>
             </div>
@@ -48,12 +48,12 @@ export default function Index() {
             <div
               onClick={() => setSortDropdown(!sortDropdown)}
               id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-1"
             >
               <FontAwesomeIcon
                 icon={faSort}
                 id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-white"
               />
             </div>
 

styles/globals.css

@@ -136,11 +136,6 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 90%
-  );
   width: 100%;
   height: 4rem;
 }
@@ -151,19 +146,71 @@
   top: 0;
   left: 0;
   pointer-events: none;
+  width: 100%;
+  height: 4rem;
+}
+
+/* For light mode */
+.link-banner::after {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1) 90%
+  );
+}
+.link-banner::before {
   background-image: linear-gradient(
     to top,
     rgba(255, 255, 255, 0),
     rgba(255, 255, 255, 1) 90%
   );
-  width: 100%;
-  height: 4rem;
+}
+
+/* For dark mode */
+.banner-dark-mode .link-banner::after {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    #171717 90%
+  );
+}
+.banner-dark-mode .link-banner::before {
+  background-image: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0),
+    #171717 90%
+  );
 }
 
 /* Theme */
 
 @layer base {
   body {
-    @apply dark:bg-sky-950 bg-white dark:text-white;
+    @apply dark:bg-neutral-900 bg-white dark:text-white;
+  }
+}
+
+/* react-select */
+
+@layer components {
+  .react-select-container .react-select__control {
+    @apply dark:bg-neutral-900 dark:border-neutral-700 dark:hover:border-neutral-500;
+  }
+
+  .react-select-container {
+    @apply dark:border-neutral-700;
+  }
+
+  .react-select-container .react-select__menu {
+    @apply dark:bg-neutral-900 dark:border-neutral-700 border;
+  }
+
+  .react-select-container .react-select__option {
+    @apply dark:hover:bg-neutral-800;
+  }
+
+  .react-select-container .react-select__input-container,
+  .react-select-container .react-select__single-value {
+    @apply dark:text-white;
   }
 }