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">
-        <FontAwesomeIcon
-          icon={icon}
-          className="w-8 h-8 text-sky-500 dark:text-sky-500"
-        />
+      <div className="p-4 bg-primary bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+        <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
       </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">
-          {value}
-        </p>
+        <p className="font-thin text-6xl text-primary mt-2">{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
-              icon={faUser}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <FontAwesomeIcon icon={faUser} className="w-6 h-6 text-primary" />
 
             <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
-              icon={faKey}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <FontAwesomeIcon icon={faKey} className="w-6 h-6 text-primary" />
 
             <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
-              icon={faLock}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
+            <FontAwesomeIcon icon={faLock} className="w-6 h-6 text-primary" />
 
             <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"
-            } 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`}
+              active === `/dashboard`
+                ? "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"
-            } 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`}
+              active === `/links` ? "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={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"
-            } 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`}
+              active === `/collections`
+                ? "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"
-            } 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`}
+              active === `/links/pinned`
+                ? "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"
-                            : "hover:bg-slate-500"
-                        } 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`}
+                            ? "bg-primary/20"
+                            : "hover:bg-slate-500/20"
+                        } 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"
-                            : "hover:bg-slate-500"
-                        } 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`}
+                            ? "bg-primary/20"
+                            : "hover:bg-slate-500/20"
+                        } 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 || ""
       }`}
     />