replace tw colors with semantic colors [WIP]

components/Checkbox.tsx

@@ -22,11 +22,11 @@ export default function Checkbox({ label, state, className, onClick }: Props) {
       />
       <FontAwesomeIcon
         icon={faSquareCheck}
-        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:block hidden"
+        className="w-5 h-5 text-primary peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faSquare}
-        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
+        className="w-5 h-5 text-primary peer-checked:hidden block"
       />
       <span className="rounded select-none">{label}</span>
     </label>

components/CollectionCard.tsx

@@ -47,7 +47,7 @@ export default function CollectionCard({ collection, className }: Props) {
             settings.theme === "dark" ? "#262626" : "#f3f4f6"
           } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
         }}
-        className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
+        className={`border border-solid border-neutral self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
           className || ""
         }`}
       >
@@ -84,7 +84,7 @@ export default function CollectionCard({ collection, className }: Props) {
                 })
                 .slice(0, 4)}
               {collection.members.length - 4 > 0 ? (
-                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 -mr-3">
                   +{collection.members.length - 4}
                 </div>
               ) : null}

components/DashboardItem.tsx

@@ -10,19 +10,14 @@ type Props = {
 export default function dashboardItem({ name, value, icon }: Props) {
   return (
     <div className="flex gap-4 items-end">
-      <div className="p-4 bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+      <div className="p-4 bg-primary bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
-        <FontAwesomeIcon
+        <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
-          icon={icon}
-          className="w-8 h-8 text-sky-500 dark:text-sky-500"
-        />
       </div>
       <div className="flex flex-col justify-center">
         <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
           {name}
         </p>
-        <p className="font-thin text-6xl text-sky-500 dark:text-sky-500 mt-2">
+        <p className="font-thin text-6xl text-primary mt-2">{value}</p>
-          {value}
-        </p>
       </div>
     </div>
   );

components/Dropdown.tsx

@@ -78,7 +78,7 @@ export default function Dropdown({
       onClickOutside={onClickOutside}
       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`}
+      } py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = e && (

components/FilterSearchDropdown.tsx

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

components/LinkCard.tsx

@@ -138,7 +138,7 @@ export default function LinkCard({ link, count, className }: Props) {
   return (
     <>
       <div
-        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 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 duration-100 rounded-2xl relative group ${
+        className={`h-fit border border-solid border-neutral-content 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 duration-100 rounded-2xl relative group ${
           className || ""
         }`}
       >
@@ -150,7 +150,7 @@ export default function LinkCard({ link, count, className }: Props) {
               setExpandDropdown({ x: e.clientX, y: e.clientY });
             }}
             id={"expand-dropdown" + link.id}
-            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-4 top-4 z-10 duration-100 p-1"
+            className="text-neutral-content dark:text-gray-300 inline-flex rounded-md cursor-pointer btn btn-ghost btn-sm btn-square dark:hover:bg-neutral-700 absolute right-4 top-4 z-10 duration-100"
           >
             <FontAwesomeIcon
               icon={faEllipsis}

components/LinkPreview.tsx

@@ -49,7 +49,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
   return (
     <>
       <div
-        className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 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 duration-100 rounded-2xl relative group ${
+        className={`h-fit border border-solid border-neutral-content 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 duration-100 rounded-2xl relative group ${
           className || ""
         }`}
       >

components/LinkSidebar.tsx

@@ -47,7 +47,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-sky-100 dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
+      className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-neutral-content dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
         className || ""
       }`}
     >

components/Modal/Collection/CollectionInfo.tsx

@@ -98,7 +98,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <p className="mb-2">Description</p>
           <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Collection/TeamManagement.tsx

@@ -131,7 +131,7 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 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"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-neutral-content border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -139,7 +139,7 @@ export default function TeamManagement({
       ) : null}
 
       {permissions !== true && collection.isPublic && (
-        <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+        <hr className="mb-3 border border-neutral-content" />
       )}
 
       {permissions === true && (
@@ -191,7 +191,7 @@ export default function TeamManagement({
                 return (
                   <div
                     key={i}
-                    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"
+                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
                       <FontAwesomeIcon
@@ -393,7 +393,7 @@ export default function TeamManagement({
       )}
 
       <div
-        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"
+        className="relative border px-2 rounded-md border-neutral-content 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">

components/Modal/Collection/ViewTeam.tsx

@@ -33,7 +33,7 @@ export default function ViewTeam({ collection }: Props) {
       <p>Here are all the members who are collaborating on this collection.</p>
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[4rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-neutral flex min-h-[4rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2 w-full">
@@ -68,7 +68,7 @@ export default function ViewTeam({ collection }: Props) {
                 return (
                   <div
                     key={i}
-                    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"
+                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     <div className="flex items-center gap-2">
                       <ProfilePhoto

components/Modal/Link/AddOrEditLink.tsx

@@ -186,7 +186,7 @@ export default function AddOrEditLink({
 
       {optionsExpanded ? (
         <div>
-          {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
+          {/* <hr className="mb-3 border border-neutral-content" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
               <p className="mb-2">Name</p>
@@ -241,7 +241,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 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
               />
             </div>
           </div>

components/Modal/Link/PreservedFormats.tsx

@@ -91,7 +91,7 @@ export default function PreservedFormats() {
   return (
     <div className={`flex flex-col gap-3 sm:w-[35rem] w-80 pt-3`}>
       {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
@@ -126,7 +126,7 @@ export default function PreservedFormats() {
       ) : undefined}
 
       {link?.pdfPath && link.pdfPath !== "pending" ? (
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />

components/Modal/index.tsx

@@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className || ""}`}
       >
-        <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 className="slide-up relative border-neutral-content 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-neutral-700 duration-100 z-20 p-2"

components/Navbar.tsx

@@ -50,7 +50,7 @@ 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-neutral-700 border-b h-16">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content 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-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
@@ -67,7 +67,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 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"
+          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-neutral-content dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-primary sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
         >
           <FontAwesomeIcon
             icon={faPlus}

components/NoLinksFound.tsx

@@ -11,7 +11,7 @@ export default function NoLinksFound({ text }: Props) {
   const { setModal } = useModalStore();
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+    <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
       <p className="text-center text-2xl">
         {text || "You haven't created any Links Here"}
       </p>

components/ProfilePhoto.tsx

@@ -24,7 +24,7 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
 
   return !image ? (
     <div
-      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={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${
         className || ""
       }`}
     >
@@ -39,7 +39,7 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
       priority={priority}
       draggable={false}
       onError={() => setImage("")}
-      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
+      className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 ${
         className || ""
       }`}
     />

components/PublicPage/PublicLinkCard.tsx

@@ -28,7 +28,7 @@ export default function LinkCard({ link, count }: Props) {
   });
 
   return (
-    <div className="border border-solid border-sky-100 dark:border-neutral-700 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 duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
+    <div className="border border-solid border-neutral-content 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 duration-100 rounded-lg p-3 flex items-start relative gap-3 group/item">
       <div className="flex justify-between items-end gap-5 w-full h-full z-0">
         <div className="flex flex-col justify-between w-full">
           <div className="flex items-center gap-2">

components/PublicPage/PublicSearchBar.tsx

@@ -23,7 +23,7 @@ export default function PublicSearchBar({ placeHolder }: Props) {
     <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-sky-500 dark:text-sky-500"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md text-primary"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-4 h-4" />
       </label>
@@ -52,7 +52,7 @@ export default function PublicSearchBar({ placeHolder }: Props) {
             );
           }
         }}
-        className="border text-sm border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 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 dark:bg-neutral-800"
+        className="border text-sm border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 rounded-md pl-8 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 dark:bg-neutral-800"
       />
     </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-sky-500 dark:text-sky-500 peer-checked:block hidden"
+        className="w-5 h-5 text-primary peer-checked:block hidden"
       />
       <FontAwesomeIcon
         icon={faCircle}
-        className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
+        className="w-5 h-5 text-primary peer-checked:hidden block"
       />
       <span className="rounded select-none">{label}</span>
     </label>

components/SearchBar.tsx

@@ -17,7 +17,7 @@ export default function SearchBar() {
     <div className="flex items-center relative group">
       <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-500"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-primary"
       >
         <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
       </label>
@@ -36,7 +36,7 @@ export default function SearchBar() {
           e.key === "Enter" &&
           router.push("/search?q=" + encodeURIComponent(searchQuery))
         }
-        className="border border-sky-100 bg-gray-50 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 dark:bg-neutral-800"
+        className="border border-neutral-content bg-gray-50 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 dark:bg-neutral-800"
       />
     </div>
   );

components/SettingsSidebar.tsx

@@ -35,7 +35,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-neutral-content dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
         className || ""
       }`}
     >
@@ -44,14 +44,11 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/account`
-                ? "bg-sky-500"
+                ? "bg-primary"
                 : "hover:bg-slate-500"
             } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <FontAwesomeIcon icon={faUser} className="w-6 h-6 text-primary" />
-              icon={faUser}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
 
             <p className="truncate w-full pr-7">Account</p>
           </div>
@@ -61,13 +58,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/appearance`
-                ? "bg-sky-500"
+                ? "bg-primary"
                 : "hover:bg-slate-500"
             } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faPalette}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">Appearance</p>
@@ -78,13 +75,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/archive`
-                ? "bg-sky-500"
+                ? "bg-primary"
                 : "hover:bg-slate-500"
             } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
             <FontAwesomeIcon
               icon={faBoxArchive}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">Archive</p>
@@ -94,13 +91,10 @@ export default function SettingsSidebar({ className }: { className?: string }) {
         <Link href="/settings/api">
           <div
             className={`${
-              active === `/settings/api` ? "bg-sky-500" : "hover:bg-slate-500"
+              active === `/settings/api` ? "bg-primary" : "hover:bg-slate-500"
             } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <FontAwesomeIcon icon={faKey} className="w-6 h-6 text-primary" />
-              icon={faKey}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
 
             <p className="truncate w-full pr-7">API Keys</p>
           </div>
@@ -110,14 +104,11 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`${
               active === `/settings/password`
-                ? "bg-sky-500"
+                ? "bg-primary"
                 : "hover:bg-slate-500"
             } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <FontAwesomeIcon icon={faLock} className="w-6 h-6 text-primary" />
-              icon={faLock}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
 
             <p className="truncate w-full pr-7">Password</p>
           </div>
@@ -128,13 +119,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             <div
               className={`${
                 active === `/settings/billing`
-                  ? "bg-sky-500"
+                  ? "bg-primary"
                   : "hover:bg-slate-500"
               } duration-100 py-2 px-2 hover:bg-opacity-20 bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
               <FontAwesomeIcon
                 icon={faCreditCard}
-                className="w-6 h-6 text-sky-500 dark:text-sky-500"
+                className="w-6 h-6 text-primary"
               />
 
               <p className="truncate w-full pr-7">Billing</p>
@@ -157,7 +148,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           >
             <FontAwesomeIcon
               icon={faCircleQuestion as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">Help</p>
@@ -170,7 +161,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           >
             <FontAwesomeIcon
               icon={faGithub as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">GitHub</p>
@@ -183,7 +174,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           >
             <FontAwesomeIcon
               icon={faXTwitter as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">Twitter</p>
@@ -196,7 +187,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           >
             <FontAwesomeIcon
               icon={faMastodon as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+              className="w-6 h-6 text-primary"
             />
 
             <p className="truncate w-full pr-7">Mastodon</p>

components/Sidebar.tsx

@@ -52,7 +52,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      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={`bg-base-200 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-neutral-content dark:border-r-neutral-700 px-2 z-20 ${
         className || ""
       }`}
     >
@@ -60,12 +60,14 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/dashboard`}>
           <div
             className={`${
-              active === `/dashboard` ? "bg-sky-500" : "hover:bg-slate-500"
+              active === `/dashboard`
-            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                ? "bg-primary/20"
+                : "hover:bg-slate-500/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+              className="w-7 h-7 drop-shadow text-primary"
             />
             <p className="truncate w-full">Dashboard</p>
           </div>
@@ -74,12 +76,12 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/links`}>
           <div
             className={`${
-              active === `/links` ? "bg-sky-500" : "hover:bg-slate-500"
+              active === `/links` ? "bg-primary/20" : "hover:bg-slate-500/20"
-            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
               icon={faLink}
-              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+              className="w-7 h-7 drop-shadow text-primary"
             />
             <p className="truncate w-full">All Links</p>
           </div>
@@ -88,12 +90,14 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/collections`}>
           <div
             className={`${
-              active === `/collections` ? "bg-sky-500" : "hover:bg-slate-500"
+              active === `/collections`
-            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                ? "bg-primary/20"
+                : "hover:bg-slate-500/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
               icon={faFolder}
-              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+              className="w-7 h-7 drop-shadow text-primary"
             />
             <p className="truncate w-full">All Collections</p>
           </div>
@@ -102,12 +106,14 @@ export default function Sidebar({ className }: { className?: string }) {
         <Link href={`/links/pinned`}>
           <div
             className={`${
-              active === `/links/pinned` ? "bg-sky-500" : "hover:bg-slate-500"
+              active === `/links/pinned`
-            } duration-100 py-5 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                ? "bg-primary/20"
+                : "hover:bg-slate-500/20"
+            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
           >
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
+              className="w-7 h-7 drop-shadow text-primary"
             />
             <p className="truncate w-full">Pinned Links</p>
           </div>
@@ -148,9 +154,9 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/collections/${e.id}`
-                            ? "bg-sky-500"
+                            ? "bg-primary/20"
-                            : "hover:bg-slate-500"
+                            : "hover:bg-slate-500/20"
-                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
                         <FontAwesomeIcon
                           icon={faFolder}
@@ -216,13 +222,13 @@ export default function Sidebar({ className }: { className?: string }) {
                       <div
                         className={`${
                           active === `/tags/${e.id}`
-                            ? "bg-sky-500"
+                            ? "bg-primary/20"
-                            : "hover:bg-slate-500"
+                            : "hover:bg-slate-500/20"
-                        } duration-100 py-1 px-2 bg-opacity-20 hover:bg-opacity-20 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
                         <FontAwesomeIcon
                           icon={faHashtag}
-                          className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
+                          className="w-4 h-4 text-primary mt-1"
                         />
 
                         <p className="truncate w-full pr-7">{e.name}</p>

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-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
+      className="absolute top-8 right-0 border border-neutral-content shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
     >
       <p className="mb-2 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">

components/TextInput.tsx

@@ -27,7 +27,7 @@ export default function TextInput({
       value={value}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
+      className={`w-full rounded-md p-2 border-neutral-content bg-gray-100 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
         className || ""
       }`}
     />

pages/_app.tsx

@@ -54,7 +54,7 @@ export default function App({
           reverseOrder={false}
           toastOptions={{
             className:
-              "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+              "border border-neutral-content dark:bg-neutral-900 dark:text-white",
           }}
         />
         <Component {...pageProps} />

pages/choose-username.tsx

@@ -41,12 +41,12 @@ export default function ChooseUsername() {
   return (
     <CenteredForm>
       <form onSubmit={submitUsername}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Choose a Username
           </p>
 
-          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="border-1 border-neutral-content" />
 
           <div>
             <p className="text-sm w-fit font-semibold mb-1">Username</p>

pages/collections/[id].tsx

@@ -58,7 +58,7 @@ export default function Index() {
               settings.theme === "dark" ? "#262626" : "#f3f4f6"
             } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
           }}
-          className="border border-solid border-sky-100 dark:border-neutral-700 rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
+          className="border border-solid border-neutral-content 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 sm:items-start">
             {activeCollection && (
@@ -111,7 +111,7 @@ export default function Index() {
                     .slice(0, 4)}
                   {activeCollection?.members.length &&
                   activeCollection.members.length - 4 > 0 ? (
-                    <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                    <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 -mr-3">
                       +{activeCollection?.members?.length - 4}
                     </div>
                   ) : null}

pages/collections/index.tsx

@@ -37,7 +37,7 @@ export default function Collections() {
             <div className="flex items-center gap-3">
               <FontAwesomeIcon
                 icon={faFolder}
-                className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+                className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
               />
               <div>
                 <p className="text-3xl capitalize font-thin">
@@ -117,7 +117,7 @@ export default function Collections() {
             })}
 
           <div
-            className="p-5 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-sky-100 dark:border-neutral-700 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 bg-gray-50 dark:bg-neutral-800 self-stretch border border-solid border-neutral-content 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",
@@ -129,7 +129,7 @@ export default function Collections() {
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
             <FontAwesomeIcon
               icon={faPlus}
-              className="w-8 h-8 text-sky-500 dark:text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+              className="w-8 h-8 text-primary group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
             />
           </div>
         </div>
@@ -139,7 +139,7 @@ export default function Collections() {
             <div className="flex items-center gap-3 my-5">
               <FontAwesomeIcon
                 icon={faFolder}
-                className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+                className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
               />
               <div>
                 <p className="text-3xl capitalize font-thin">

pages/confirmation.tsx

@@ -5,12 +5,12 @@ import React from "react";
 export default function EmailConfirmaion() {
   return (
     <CenteredForm>
-      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-sky-100 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-800">
+      <div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-slate-50 dark:bg-neutral-800">
         <p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
           Please check your Email
         </p>
 
-        <hr className="border-1 border-sky-100 dark:border-neutral-700 my-3" />
+        <hr className="border-1 border-neutral my-3" />
 
         <p>A sign in link has been sent to your email address.</p>
 

pages/dashboard.tsx

@@ -110,7 +110,7 @@ export default function Dashboard() {
         <div className="flex items-center gap-3">
           <FontAwesomeIcon
             icon={faChartSimple}
-            className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+            className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
           />
           <div>
             <p className="text-3xl capitalize font-thin">Dashboard</p>
@@ -120,15 +120,15 @@ export default function Dashboard() {
         </div>
 
         <div>
-          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-sky-100 dark:border-neutral-700 bg-gray-100 dark:bg-neutral-800">
+          <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200 dark:bg-neutral-800">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
               icon={faLink}
             />
 
-            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
+            <hr className="border-neutral-content md:hidden my-5" />
-            <div className="h-24 border-1 border-l border-sky-100 dark:border-neutral-700 hidden md:block"></div>
+            <div className="h-24 border-1 border-l border-neutral-content hidden md:block"></div>
 
             <DashboardItem
               name={collections.length === 1 ? "Collection" : "Collections"}
@@ -136,8 +136,8 @@ export default function Dashboard() {
               icon={faFolder}
             />
 
-            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
+            <hr className="border-neutral-content md:hidden my-5" />
-            <div className="h-24 border-1 border-r border-sky-100 dark:border-neutral-700 hidden md:block"></div>
+            <div className="h-24 border-1 border-r border-neutral-content hidden md:block"></div>
 
             <DashboardItem
               name={tags.length === 1 ? "Tag" : "Tags"}
@@ -151,7 +151,7 @@ export default function Dashboard() {
           <div className="flex gap-2 items-center">
             <FontAwesomeIcon
               icon={faClockRotateLeft}
-              className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
+              className="w-5 h-5 text-primary drop-shadow"
             />
             <p className="text-2xl">Recently Added Links</p>
           </div>
@@ -181,7 +181,7 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
             >
               <p className="text-center text-2xl">
                 View Your Recently Added Links Here!
@@ -215,7 +215,7 @@ export default function Dashboard() {
                   <div
                     onClick={() => setImportDropdown(!importDropdown)}
                     id="import-dropdown"
-                    className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-sky-500 hover:dark:border-sky-500 hover:text-sky-500 hover:dark:text-sky-500 duration-100 group"
+                    className="flex gap-2 select-none text-sm cursor-pointer p-2 px-3 rounded-md border dark:hover:border-sky-600 text-black border-black dark:text-white dark:border-white hover:border-primary hover:dark:border-primary hover:text-primary duration-100 group"
                   >
                     <FontAwesomeIcon
                       icon={faFileImport}
@@ -236,7 +236,7 @@ export default function Dashboard() {
                         if (target.id !== "import-dropdown")
                           setImportDropdown(false);
                       }}
-                      className={`absolute top-10 left-0 w-52 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`}
+                      className={`absolute top-10 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
                     >
                       <div className="cursor-pointer rounded-md">
                         <label
@@ -286,7 +286,7 @@ export default function Dashboard() {
           <div className="flex gap-2 items-center">
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="w-5 h-5 text-sky-500 dark:text-sky-500 drop-shadow"
+              className="w-5 h-5 text-primary drop-shadow"
             />
             <p className="text-2xl">Pinned Links</p>
           </div>
@@ -318,7 +318,7 @@ export default function Dashboard() {
           ) : (
             <div
               style={{ flex: "1 1 auto" }}
-              className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+              className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
             >
               <p className="text-center text-2xl">
                 Pin Your Favorite Links Here!

pages/forgot.tsx

@@ -43,12 +43,12 @@ export default function Forgot() {
   return (
     <CenteredForm>
       <form onSubmit={sendConfirmation}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Password Recovery
           </p>
 
-          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="border-1 border-neutral-content" />
 
           <div>
             <p>

pages/links/[id].tsx

@@ -152,7 +152,7 @@ export default function Index() {
       >
         <div
           id="link-banner"
-          className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
+          className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content shadow-md"
         >
           <div id="link-banner-inner" className="link-banner-inner"></div>
 
@@ -259,7 +259,7 @@ export default function Index() {
               }}
             ></div>
           ) : (
-            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
               {link?.readabilityPath === "pending" ? (
                 <p className="text-center">
                   Generating readable format, please wait...

pages/links/index.tsx

@@ -24,7 +24,7 @@ export default function Links() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faLink}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">All Links</p>

pages/links/pinned.tsx

@@ -24,7 +24,7 @@ export default function PinnedLinks() {
           <div className="flex items-center gap-3">
             <FontAwesomeIcon
               icon={faThumbTack}
-              className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
+              className="sm:w-10 sm:h-10 w-6 h-6 text-primary drop-shadow"
             />
             <div>
               <p className="text-3xl capitalize font-thin">Pinned Links</p>
@@ -64,7 +64,7 @@ export default function PinnedLinks() {
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
-            className="sky-shadow flex flex-col justify-center h-full border border-solid border-sky-100 dark:border-neutral-700 w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
+            className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800"
           >
             <p className="text-center text-2xl">
               Pin Your Favorite Links Here!

pages/login.tsx

@@ -63,12 +63,12 @@ export default function Login() {
   return (
     <CenteredForm text="Sign in to your account">
       <form onSubmit={loginUser}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
           <p className="text-3xl text-center font-extralight">
             Enter your credentials
           </p>
 
-          <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="border-1 border-neutral-content" />
 
           <div>
             <p className="text-sm w-fit font-semibold mb-1">

pages/public/collections/[id].tsx

@@ -179,7 +179,7 @@ export default function PublicCollections() {
                 .slice(0, 3)}
               {collection?.members.length &&
               collection.members.length - 3 > 0 ? (
-                <div className="w-8 h-8 min-w-[2rem] text-white text-sm flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700">
+                <div className="w-8 h-8 min-w-[2rem] text-white text-sm flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200">
                   +{collection?.members?.length - 3}
                 </div>
               ) : null}

pages/public/links/[id].tsx

@@ -152,7 +152,7 @@ export default function Index() {
       >
         <div
           id="link-banner"
-          className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-sky-100 dark:border-neutral-700 shadow-md"
+          className="link-banner p-5 mb-4 relative bg-opacity-10 border border-solid border-neutral-content shadow-md"
         >
           <div id="link-banner-inner" className="link-banner-inner"></div>
 
@@ -259,7 +259,7 @@ export default function Index() {
               }}
             ></div>
           ) : (
-            <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
+            <div className="border border-solid border-neutral-content w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
               {link?.readabilityPath === "pending" ? (
                 <p className="text-center">
                   Generating readable format, please wait...

pages/register.tsx

@@ -104,7 +104,7 @@ export default function Register() {
       }
     >
       {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
-        <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
           <p>
             Registration is disabled for this instance, please contact the admin
             in case of any issues.
@@ -112,12 +112,12 @@ export default function Register() {
         </div>
       ) : (
         <form onSubmit={registerUser}>
-          <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+          <div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
             <p className="text-3xl text-center font-extralight">
               Enter your details
             </p>
 
-            <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+            <hr className="border-1 border-neutral-content" />
 
             <div>
               <p className="text-sm w-fit font-semibold mb-1">Display Name</p>

pages/search.tsx

@@ -45,7 +45,7 @@ export default function Search() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize font-thin">
                 Search Results

pages/settings/account.tsx

@@ -153,7 +153,7 @@ export default function Account() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Account Settings</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <div className="flex flex-col gap-10">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
@@ -206,13 +206,13 @@ export default function Account() {
                       image: "",
                     })
                   }
-                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
+                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
                 >
                   <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-                <label 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">
+                <label className="border border-slate-200 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
                     type="file"
@@ -235,7 +235,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="my-3 border-1 border-neutral-content" />
 
           <div className="flex gap-3 flex-col">
             <div>
@@ -247,7 +247,7 @@ export default function Account() {
               >
                 <div
                   id="import-dropdown"
-                  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"
+                  className="border border-slate-200 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>
@@ -258,7 +258,7 @@ export default function Account() {
                       if (target.id !== "import-dropdown")
                         setImportDropdown(false);
                     }}
-                    className={`absolute top-7 left-0 w-52 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`}
+                    className={`absolute top-7 left-0 w-52 py-1 shadow-md border border-neutral-content bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
                   >
                     <div className="cursor-pointer rounded-md">
                       <label
@@ -304,7 +304,7 @@ export default function Account() {
             <div>
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
-                <div className="border w-fit 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">
+                <div className="border w-fit border-slate-200 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>
@@ -319,7 +319,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="my-3 border-1 border-neutral-content" />
 
           <Checkbox
             label="Make profile private"
@@ -339,7 +339,7 @@ export default function Account() {
                 visibility to your profile. Separated by comma.
               </p>
               <textarea
-                className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+                className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
                 placeholder="Your profile is hidden from everyone right now..."
                 value={whitelistedUsersTextbox}
                 onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
@@ -362,7 +362,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="my-3 border-1 border-neutral-content" />
 
           <p>
             This will permanently delete ALL the Links, Collections, Tags, and

pages/settings/api.tsx

@@ -56,7 +56,7 @@ export default function Api() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <div className="flex flex-col gap-3">
         <div className="badge bg-orange-500 rounded-md border border-black w-fit px-2 text-black">

pages/settings/appearance.tsx

@@ -69,16 +69,16 @@ export default function Appearance() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Appearance</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <div className="flex flex-col gap-10">
         <div>
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                 localStorage.getItem("theme") === "dark"
-                  ? "dark:outline-sky-500 text-sky-500"
+                  ? "dark:outline-primary text-primary"
                   : "text-white"
               }`}
               onClick={() => updateSettings({ theme: "dark" })}
@@ -86,19 +86,19 @@ export default function Appearance() {
               <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
               <p className="text-2xl">Dark Theme</p>
 
-              {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                 localStorage.getItem("theme") === "light"
-                  ? "outline-sky-500 text-sky-500"
+                  ? "outline-primary text-primary"
                   : "text-black"
               }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
               <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
               <p className="text-2xl">Light Theme</p>
-              {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
           </div>
         </div>
@@ -107,7 +107,7 @@ export default function Appearance() {
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
           </div>
-          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+          <hr className="my-3 border-1 border-neutral-content" />
           <Checkbox
             label="Display Icons"
             state={user.displayLinkIcons}

pages/settings/archive.tsx

@@ -59,7 +59,7 @@ export default function Archive() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Archive Settings</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <p>Formats to Archive webpages:</p>
       <div className="p-3">

pages/settings/billing.tsx

@@ -13,7 +13,7 @@ export default function Billing() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md">

pages/settings/delete.tsx

@@ -54,7 +54,7 @@ export default function Password() {
 
   return (
     <CenteredForm>
-      <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 dark:border-neutral-700 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+      <div className="p-4 mx-auto relative flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
         <Link
           href="/settings/account"
           className="absolute top-4 left-4 gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
@@ -67,7 +67,7 @@ export default function Password() {
           </p>
         </div>
 
-        <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+        <hr className="border-1 border-neutral-content" />
 
         <p>
           This will permanently delete all the Links, Collections, Tags, and
@@ -92,8 +92,8 @@ export default function Password() {
         ) : undefined}
 
         {process.env.NEXT_PUBLIC_STRIPE ? (
-          <fieldset className="border rounded-md p-2 border-sky-500">
+          <fieldset className="border rounded-md p-2 border-primary">
-            <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-sky-500">
+            <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
               <b>Optional</b>{" "}
               <i className="min-[390px]:text-sm text-xs">
                 (but it really helps us improve!)
@@ -102,7 +102,7 @@ export default function Password() {
             <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
               <p className="text-sm">Reason for cancellation:</p>
               <select
-                className="rounded-md p-1 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="rounded-md p-1 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               >
@@ -127,7 +127,7 @@ export default function Password() {
                 value={comment}
                 onChange={(e) => setComment(e.target.value)}
                 placeholder="e.g. I needed a feature that..."
-                className="resize-none w-full rounded-md p-2 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
               />
             </div>
           </fieldset>

pages/settings/password.tsx

@@ -47,7 +47,7 @@ export default function Password() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Change Password</p>
 
-      <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+      <hr className="my-3 border-1 border-neutral-content" />
 
       <p className="mb-3">
         To change your password, please fill out the following. Your password

pages/subscribe.tsx

@@ -30,12 +30,12 @@ export default function Subscribe() {
         process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
       }-day free trial, cancel anytime!`}
     >
-      <div className="p-4 mx-auto flex flex-col gap-3 justify-between dark:border-neutral-700 max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
+      <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
           Subscribe to Linkwarden!
         </p>
 
-        <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+        <hr className="border-1 border-neutral-content" />
 
         <div>
           <p>
@@ -47,7 +47,7 @@ export default function Subscribe() {
           </p>
         </div>
 
-        <div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
+        <div className="flex text-white dark:text-black gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
             className={`w-full duration-100 text-sm rounded-lg p-1 ${
@@ -84,8 +84,8 @@ export default function Subscribe() {
           <p className="font-semibold">
             Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
           </p>
-          <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-sky-100 dark:border-neutral-700">
+          <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
-            <legend className="w-fit font-extralight px-2 border border-sky-100 dark:border-neutral-700 rounded-md text-xl">
+            <legend className="w-fit font-extralight px-2 border border-neutral rounded-md text-xl">
               Total
             </legend>
 

pages/tags/[id].tsx

@@ -107,7 +107,7 @@ export default function Index() {
             <div className="flex gap-2 items-end font-thin">
               <FontAwesomeIcon
                 icon={faHashtag}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-primary"
               />
               {renameTag ? (
                 <>
@@ -115,7 +115,7 @@ export default function Index() {
                     <input
                       type="text"
                       autoFocus
-                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-sky-100 dark:border-b-neutral-700"
+                      className="sm:text-4xl text-3xl capitalize bg-transparent h-10 w-3/4 outline-none border-b border-b-neutral-content dark:border-b-neutral-700"
                       value={newTagName}
                       onChange={(e) => setNewTagName(e.target.value)}
                     />

styles/globals.css

@@ -160,17 +160,17 @@ body {
 /* react-select */
 @layer components {
   .react-select-container .react-select__control {
-    @apply dark:bg-neutral-950 bg-gray-50 dark:border-neutral-700 dark:hover:border-neutral-500;
+    @apply dark:bg-neutral-950 bg-gray-50 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__menu {
+    @apply dark:bg-neutral-900 border;
+  }
+
   .react-select-container .react-select__option {
     @apply dark:hover:bg-neutral-800;
   }

tailwind.config.js

@@ -10,7 +10,9 @@ module.exports = {
           secondary: "#22d3ee",
           accent: "#4f46e5",
           neutral: "#6b7280",
+          "neutral-content": "#d1d5db",
           "base-100": "#ffffff",
+          "base-200": "#f3f4f6",
           info: "#a5f3fc",
           success: "#22c55e",
           warning: "#facc15",
@@ -22,8 +24,10 @@ module.exports = {
           primary: "#38bdf8",
           secondary: "#0284c7",
           accent: "#818cf8",
-          neutral: "#1f2937",
+          neutral: "#9ca3af",
+          "neutral-content": "#404040",
           "base-100": "#171717",
+          "base-200": "#1f2937",
           info: "#009ee4",
           success: "#00b17d",
           warning: "#eac700",