working on dark mode

2023-08-02 19:53:55 +02:00 · 2023-08-02 19:53:55 +02:00 · 64c417c1be
parent ffb1098a15
commit 64c417c1be
27 changed files with 162 additions and 108 deletions
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@ -32,24 +32,24 @@ export default function CollectionCard({ collection, className }: Props) {

  return (
    <div
-      className={`bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
+      className={`bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% to-white to-100% self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none group relative ${className}`}
    >
      <div
        onClick={() => setExpandDropdown(!expandDropdown)}
        id={"expand-dropdown" + collection.id}
-        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+        className="inline-flex absolute top-5 right-5 rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
      >
        <FontAwesomeIcon
          icon={faEllipsis}
          id={"expand-dropdown" + collection.id}
-          className="w-5 h-5 text-gray-500"
+          className="w-5 h-5 text-gray-500 dark:text-sky-500"
        />
      </div>
      <Link
        href={`/collections/${collection.id}`}
        className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
      >
-        <p className="text-2xl font-bold capitalize text-sky-700 break-words line-clamp-3 w-4/5">
+        <p className="text-2xl font-bold capitalize text-sky-700 dark:text-sky-300 break-words line-clamp-3 w-4/5">
          {collection.name}
        </p>
        <div className="flex justify-between items-center">
@ -73,11 +73,11 @@ export default function CollectionCard({ collection, className }: Props) {
            ) : null}
          </div>
          <div className="text-right w-40">
-            <div className="text-sky-700 font-bold text-sm flex justify-end gap-1 items-center">
-              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500" />
+            <div className="text-sky-700 dark:text-sky-400 font-bold text-sm flex justify-end gap-1 items-center">
+              <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-500 dark:text-sky-300" />
              {collection._count && collection._count.links}
            </div>
-            <div className="flex items-center justify-end gap-1 text-gray-600">
+            <div className="flex items-center justify-end gap-1 text-gray-600 dark:text-sky-500">
              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
              <p className="font-bold text-xs">{formattedDate}</p>
            </div>
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@ -25,13 +25,13 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
  return (
    <ClickAwayHandler
      onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
+      className={`${className} py-1 shadow-md border border-sky-100 dark:border-sky-800 bg-gray-50 dark:bg-blue-925 rounded-md flex flex-col z-20`}
    >
      {items.map((e, i) => {
        const inner = e && (
          <div className="cursor-pointer rounded-md">
            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
-              <p className="text-sky-900 select-none">{e.name}</p>
+              <p className="text-sky-900 dark:text-sky-400 select-none">{e.name}</p>
            </div>
          </div>
        );
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@ -106,7 +106,7 @@ export default function LinkCard({ link, count, className }: Props) {

  return (
    <div
-      className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
+      className={`bg-gradient-to-tr from-slate-200 dark:from-sky-800 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 rounded-2xl relative group ${className}`}
    >
      {(permissions === true ||
        permissions?.canUpdate ||
@ -114,7 +114,7 @@ export default function LinkCard({ link, count, className }: Props) {
        <div
          onClick={() => setExpandDropdown(!expandDropdown)}
          id={"expand-dropdown" + link.id}
-          className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
+          className="text-gray-500 dark:text-sky-400 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
        >
          <FontAwesomeIcon
            icon={faEllipsis}
@ -156,8 +156,8 @@ export default function LinkCard({ link, count, className }: Props) {
        <div className="flex justify-between gap-5 w-full h-full z-0">
          <div className="flex flex-col justify-between w-full">
            <div className="flex items-baseline gap-1">
-              <p className="text-sm text-sky-500 font-bold">{count + 1}.</p>
-              <p className="text-lg text-sky-700 font-bold truncate capitalize w-full pr-8">
+              <p className="text-sm text-sky-500 dark:text-sky-200 font-bold">{count + 1}.</p>
+              <p className="text-lg text-sky-700 dark:text-sky-200 font-bold truncate capitalize w-full pr-8">
                {link.name || link.description}
              </p>
            </div>
@ -168,16 +168,16 @@ export default function LinkCard({ link, count, className }: Props) {
                  className="w-4 h-4 mt-1 drop-shadow"
                  style={{ color: collection?.color }}
                />
-                <p className="text-sky-900 truncate capitalize">
+                <p className="text-sky-900 dark:text-sky-300 truncate capitalize">
                  {collection?.name}
                </p>
              </div>
            </div>
-            <div className="flex items-center gap-1 w-full pr-20 text-gray-500">
+            <div className="flex items-center gap-1 w-full pr-20 text-gray-500 dark:text-sky-500">
              <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
              <p className="truncate w-full">{shortendURL}</p>
            </div>
-            <div className="flex items-center gap-1 text-gray-500">
+            <div className="flex items-center gap-1 text-gray-500 dark:text-sky-500">
              <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
              <p>{formattedDate}</p>
            </div>
--- a/components/Modal/Collection/CollectionInfo.tsx
+++ b/components/Modal/Collection/CollectionInfo.tsx
@ -60,7 +60,7 @@ export default function CollectionInfo({
    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
      <div className="flex flex-col sm:flex-row gap-3">
        <div className="w-full">
-          <p className="text-sm text-sky-700 mb-2">
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
            Name
            <RequiredBadge />
          </p>
@ -72,11 +72,11 @@ export default function CollectionInfo({
              }
              type="text"
              placeholder="e.g. Example Collection"
-              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+              className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
            />
            <div className="color-picker flex justify-between">
              <div className="flex flex-col justify-between items-center w-32">
-                <p className="text-sm w-full text-sky-700 mb-2">Icon Color</p>
+                <p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">Icon Color</p>
                <div style={{ color: collection.color }}>
                  <FontAwesomeIcon
                    icon={faFolder}
@ -84,7 +84,7 @@ export default function CollectionInfo({
                  />
                </div>
                <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 dark:text-sky-400 hover:bg-slate-200 duration-100"
                  onClick={() =>
                    setCollection({ ...collection, color: "#0ea5e9" })
                  }
@ -101,9 +101,9 @@ export default function CollectionInfo({
        </div>

        <div className="w-full">
-          <p className="text-sm text-sky-700 mb-2">Description</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
          <textarea
-            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-700"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-blue-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
            placeholder="The purpose of this Collection..."
            value={collection.description}
            onChange={(e) =>
--- a/components/Modal/Collection/index.tsx
+++ b/components/Modal/Collection/index.tsx
@ -46,9 +46,9 @@ export default function CollectionModal({
    <div className={className}>
      <Tab.Group defaultIndex={defaultIndex}>
        {method === "CREATE" && (
-          <p className="text-xl text-sky-700 text-center">New Collection</p>
+          <p className="text-xl text-sky-700 dark:text-sky-400 text-center">New Collection</p>
        )}
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
+        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-400">
          {method === "UPDATE" && (
            <>
              {isOwner && (
--- a/components/Modal/Link/AddOrEditLink.tsx
+++ b/components/Modal/Link/AddOrEditLink.tsx
@ -126,7 +126,7 @@ export default function AddOrEditLink({

      {method === "CREATE" ? (
        <div>
-          <p className="text-sm text-sky-700 mb-2 font-bold">
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
            Address (URL)
            <RequiredBadge />
          </p>
@ -135,14 +135,14 @@ export default function AddOrEditLink({
            onChange={(e) => setLink({ ...link, url: e.target.value })}
            type="text"
            placeholder="e.g. http://example.com/"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
          />
        </div>
      ) : null}
-      <hr />
+      <hr className="dark:border-sky-800" />
      <div className="grid sm:grid-cols-2 gap-3">
        <div>
-          <p className="text-sm text-sky-700 mb-2">Collection</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Collection</p>
          <CollectionSelection
            onChange={setCollection}
            // defaultValue={{
@ -161,7 +161,7 @@ export default function AddOrEditLink({
        </div>

        <div>
-          <p className="text-sm text-sky-700 mb-2">Tags</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Tags</p>
          <TagSelection
            onChange={setTags}
            defaultValue={link.tags.map((e) => {
@ -171,18 +171,18 @@ export default function AddOrEditLink({
        </div>

        <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Name</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
          <input
            value={link.name}
            onChange={(e) => setLink({ ...link, name: e.target.value })}
            type="text"
            placeholder="e.g. Example Link"
-            className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
          />
        </div>

        <div className="sm:col-span-2">
-          <p className="text-sm text-sky-700 mb-2">Description</p>
+          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
          <textarea
            value={link.description}
            onChange={(e) => setLink({ ...link, description: e.target.value })}
@ -191,7 +191,7 @@ export default function AddOrEditLink({
                ? "Will be auto generated if nothing is provided."
                : ""
            }
-            className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+            className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-blue-950"
          />
        </div>
      </div>
--- a/components/Modal/Link/index.tsx
+++ b/components/Modal/Link/index.tsx
@ -33,10 +33,10 @@ export default function LinkModal({
    <div className={className}>
      <Tab.Group defaultIndex={defaultIndex}>
        {method === "CREATE" && (
-          <p className="text-xl text-sky-700 text-center">New Link</p>
+          <p className="text-xl text-sky-700 dark:text-sky-300 text-center">New Link</p>
        )}
        <Tab.List
-          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 ${
+          className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300 ${
            isOwnerOrMod ? "" : "pb-8"
          }`}
        >
--- a/components/Modal/index.tsx
+++ b/components/Modal/index.tsx
@ -16,14 +16,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
        onClickOutside={toggleModal}
        className={`m-auto ${className}`}
      >
-        <div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
+        <div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-blue-950">
          <div
            onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
          >
            <FontAwesomeIcon
              icon={faChevronLeft}
-              className="w-4 h-4 text-gray-500"
+              className="w-4 h-4 text-gray-500 dark:text-gray-200"
            />
          </div>
          {children}
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -9,6 +9,7 @@ import { useRouter } from "next/router";
 import Search from "@/components/Search";
 import useAccountStore from "@/store/account";
 import ProfilePhoto from "@/components/ProfilePhoto";
+import ToggleDarkMode from "@/components/ToggleDarkMode";
 import useModalStore from "@/store/modals";

 export default function Navbar() {
@ -33,7 +34,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 border-b h-16">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 dark:border-b-sky-800 border-b h-16">
      <div
        onClick={toggleSidebar}
        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-sky-700 rounded-md duration-100 hover:bg-slate-200"
@ -50,7 +51,7 @@ export default function Navbar() {
              method: "CREATE",
            });
          }}
-          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-sky-100 text-sky-700 sm:text-white sm:bg-sky-700 sm:dark:bg-sky-400 sm:hover:bg-sky-600 duration-100 group"
        >
          <FontAwesomeIcon
            icon={faPlus}
@ -60,16 +61,16 @@ export default function Navbar() {
            New Link
          </span>
        </div>
-
+        <ToggleDarkMode />
        <div className="relative">
          <div
-            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
+            className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white dark:bg-blue-950 cursor-pointer"
            onClick={() => setProfileDropdown(!profileDropdown)}
            id="profile-dropdown"
          >
            <ProfilePhoto
              src={account.profilePic}
-              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100  border-[3px]"
+              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px] dark:border-blue-800"
            />
            <p
              id="profile-dropdown"
--- a/components/NoLinksFound.tsx
+++ b/components/NoLinksFound.tsx
@ -7,12 +7,12 @@ export default function NoLinksFound() {
  const { setModal } = useModalStore();

  return (
-    <div className="border border-solid border-sky-100 w-full p-10 rounded-2xl">
-      <p className="text-center text-3xl text-sky-700">
+    <div className="border border-solid border-sky-100 dark:border-sky-800 w-full p-10 rounded-2xl">
+      <p className="text-center text-3xl text-sky-700 dark:text-white">
        You haven&apos;t created any Links Here
      </p>
      <br />
-      <div className="text-center text-sky-900 text-sm flex items-baseline justify-center gap-1 w-full">
+      <div className="text-center text-sky-900 dark:text-white text-sm flex items-baseline justify-center gap-1 w-full">
        <p>Start by creating a</p>{" "}
        <div
          onClick={() => {
@ -22,7 +22,7 @@ export default function NoLinksFound() {
              method: "CREATE",
            });
          }}
-          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 hover:bg-sky-600 duration-100 group"
+          className="inline-flex gap-1 relative w-[7.2rem] items-center font-semibold select-none cursor-pointer p-2 px-3 rounded-full text-white bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 duration-100 group"
        >
          <FontAwesomeIcon
            icon={faPlus}
--- a/components/ProfilePhoto.tsx
+++ b/components/ProfilePhoto.tsx
@ -33,7 +33,7 @@ export default function ProfilePhoto({

  return error || !src ? (
    <div
-      className={`bg-sky-500 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
+      className={`bg-sky-500 dark:bg-sky-300 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 flex items-center justify-center ${className}`}
    >
      <FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
    </div>
--- a/components/RadioButton.tsx
+++ b/components/RadioButton.tsx
@ -20,13 +20,13 @@ export default function RadioButton({ label, state, onClick }: Props) {
      />
      <FontAwesomeIcon
        icon={faCircleCheck}
-        className="w-5 h-5 text-sky-700 peer-checked:block hidden"
+        className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:block hidden"
      />
      <FontAwesomeIcon
        icon={faCircle}
-        className="w-5 h-5 text-sky-700 peer-checked:hidden block"
+        className="w-5 h-5 text-sky-700 dark:text-sky-300 peer-checked:hidden block"
      />
-      <span className="text-sky-900 rounded select-none">{label}</span>
+      <span className="text-sky-900 dark:text-sky-300 rounded select-none">{label}</span>
    </label>
  );
 }
--- a/components/RequiredBadge.tsx
+++ b/components/RequiredBadge.tsx
@ -1,6 +1,6 @@
 export default function RequiredBadge() {
  return (
-    <span title="Required Field" className="text-sky-700 cursor-help">
+    <span title="Required Field" className="text-sky-700 dark:text-sky-400 cursor-help">
      {" "}
      *
    </span>
--- a/components/Search.tsx
+++ b/components/Search.tsx
@ -24,7 +24,7 @@ export default function Search() {
    >
      <label
        htmlFor="search-box"
-        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 group-hover:text-sky-700"
+        className="inline-flex w-fit absolute left-2 pointer-events-none rounded-md p-1 text-sky-500 dark:text-sky-300 group-hover:text-sky-700"
      >
        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
      </label>
@ -44,7 +44,7 @@ export default function Search() {
          router.push("/search/" + encodeURIComponent(searchQuery))
        }
        autoFocus={searchBox}
-        className="border border-sky-100 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none"
+        className="border border-sky-100 dark:border-sky-800 rounded-md pl-10 py-2 pr-2 w-44 sm:w-60 focus:border-sky-700 md:focus:w-80 hover:border-sky-700 duration-100 outline-none dark:bg-sky-950"
      />
    </div>
  );
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@ -51,37 +51,37 @@ export default function Sidebar({ className }: { className?: string }) {

  return (
    <div
-      className={`bg-gray-100 h-full w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
+      className={`bg-gray-100 dark:bg-blue-925 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-blue-950 border-r-sky-100 dark:border-r-sky-800 px-2 z-20 ${className}`}
    >
      <div className="flex justify-center gap-2 mt-2">
        <Link
          href="/dashboard"
          className={`${
            active === "/dashboard"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
        >
          <FontAwesomeIcon
            icon={faChartSimple}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
          />
-          <p className="text-sky-700 text-xs font-semibold">Dashboard</p>
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">Dashboard</p>
        </Link>

        <Link
          href="/links"
          className={`${
            active === "/links"
-              ? "bg-sky-200"
-              : "hover:bg-slate-200 bg-gray-100"
+              ? "bg-sky-200 dark:bg-sky-600"
+              : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
          } outline-sky-100 outline-1 duration-100 py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
        >
          <FontAwesomeIcon
            icon={faLink}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
          />
-          <p className="text-sky-700 text-xs font-semibold">
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">
            <span className="hidden xl:inline-block">All</span> Links
          </p>
        </Link>
@ -89,14 +89,14 @@ export default function Sidebar({ className }: { className?: string }) {
        <Link
          href="/collections"
          className={`${
-            active === "/collections" ? "bg-sky-200" : "hover:bg-slate-200"
+            active === "/collections" ? "bg-sky-200 dark:bg-sky-600" : "hover:bg-slate-200 hover:dark:bg-sky-800"
          } outline-sky-100 outline-1 duration-100  py-1 px-2 rounded-md cursor-pointer flex justify-center flex-col items-center gap-1 w-full`}
        >
          <FontAwesomeIcon
            icon={faFolder}
-            className={`w-8 h-8 drop-shadow text-sky-500`}
+            className={`w-8 h-8 drop-shadow text-sky-500 dark:text-sky-100`}
          />
-          <p className="text-sky-700 text-xs font-semibold">
+          <p className="text-sky-700 dark:text-sky-200 text-xs font-semibold">
            <span className="hidden xl:inline-block">All</span> Collections
          </p>
        </Link>
@ -107,7 +107,7 @@ export default function Sidebar({ className }: { className?: string }) {
          onClick={() => {
            setCollectionDisclosure(!collectionDisclosure);
          }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-sky-500 mt-5"
        >
          <p>Collections</p>

@ -136,8 +136,8 @@ export default function Sidebar({ className }: { className?: string }) {
                      <div
                        className={`${
                          active === `/collections/${e.id}`
-                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
+                            ? "bg-sky-200 dark:bg-sky-700 "
+                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray100 dark:bg-blue-925"
                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                      >
                        <FontAwesomeIcon
@ -146,7 +146,7 @@ export default function Sidebar({ className }: { className?: string }) {
                          style={{ color: e.color }}
                        />

-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-sky-700 dark:text-sky-200 truncate w-full pr-7">
                          {e.name}
                        </p>
                      </div>
@ -157,7 +157,7 @@ export default function Sidebar({ className }: { className?: string }) {
              <div
                className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
              >
-                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
                  You Have No Collections...
                </p>
              </div>
@ -170,7 +170,7 @@ export default function Sidebar({ className }: { className?: string }) {
          onClick={() => {
            setTagDisclosure(!tagDisclosure);
          }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 mt-5"
+          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-gray-500 dark:text-sky-500 mt-5"
        >
          <p>Tags</p>
          <FontAwesomeIcon
@ -197,7 +197,7 @@ export default function Sidebar({ className }: { className?: string }) {
                        className={`${
                          active === `/tags/${e.id}`
                            ? "bg-sky-200"
-                            : "hover:bg-slate-200 bg-gray-100"
+                            : "hover:bg-slate-200 hover:dark:bg-sky-800 bg-gray-100 dark:bg-blue-925"
                        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                      >
                        <FontAwesomeIcon
@ -205,7 +205,7 @@ export default function Sidebar({ className }: { className?: string }) {
                          className="w-4 h-4 text-sky-500 mt-1"
                        />

-                        <p className="text-sky-700 truncate w-full pr-7">
+                        <p className="text-sky-700 dark:text-sky-300 truncate w-full pr-7">
                          {e.name}
                        </p>
                      </div>
@ -216,7 +216,7 @@ export default function Sidebar({ className }: { className?: string }) {
              <div
                className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
              >
-                <p className="text-gray-500 text-xs font-semibold truncate w-full pr-7">
+                <p className="text-gray-500 dark:text-sky-500 text-xs font-semibold truncate w-full pr-7">
                  You Have No Tags...
                </p>
              </div>
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@ -21,9 +21,9 @@ 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 shadow-md bg-gray-50 rounded-md p-2 z-20 w-48"
+      className="absolute top-8 right-0 border border-sky-100 dark:border-sky-800 shadow-md bg-gray-50 dark:bg-blue-925 rounded-md p-2 z-20 w-48"
    >
-      <p className="mb-2 text-sky-900 text-center font-semibold">Sort by</p>
+      <p className="mb-2 text-sky-900 dark:text-sky-200 text-center font-semibold">Sort by</p>
      <div className="flex flex-col gap-2">
        <RadioButton
          label="Date (Newest First)"
--- a/components/SubmitButton.tsx
+++ b/components/SubmitButton.tsx
@ -21,7 +21,7 @@ export default function SubmitButton({
      className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
        loading
          ? "bg-sky-600 cursor-auto"
-          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
+          : "bg-sky-700 dark:bg-sky-400 hover:bg-sky-600 hover:dark:bg-sky-300 cursor-pointer"
      } ${className}`}
      onClick={() => {
        if (!loading) onClick();
--- a/components/ToggleDarkMode.tsx
+++ b/components/ToggleDarkMode.tsx
@ -0,0 +1,29 @@
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+export default function ToggleDarkMode() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
+  return (
+    <div
+      className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:dark:bg-slate-800 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+      onClick={handleToggle}
+    >
+      <div className="shadow bg-sky-700 dark:bg-sky-400 flex items-center justify-center rounded-full text-white w-10 h-10 sm:group-hover:w-8 sm:group-hover:h-8 duration-100 border-[3px] border-slate-200 dark:border-blue-900">
+        <FontAwesomeIcon
+          icon={theme === "dark" ? faSun : faMoon}
+          className="w-1/2 h-1/2"
+        />
+      </div>
+    </div>
+  );
+}
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    "eslint-config-next": "13.4.9",
    "next": "13.4.12",
    "next-auth": "^4.22.1",
+    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.3",
    "playwright": "^1.35.1",
    "react": "18.2.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -6,6 +6,7 @@ import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
 import { Toaster } from "react-hot-toast";
 import { Session } from "next-auth";
+import { ThemeProvider } from "next-themes";

 export default function App({
  Component,
@ -43,7 +44,9 @@ export default function App({
        toastOptions={{ className: "border border-sky-100" }}
      />
      <AuthRedirect>
+        <ThemeProvider attribute="class">
          <Component {...pageProps} />
+        </ThemeProvider>
      </AuthRedirect>
    </SessionProvider>
  );
--- a/pages/collections/[id].tsx
+++ b/pages/collections/[id].tsx
@ -50,7 +50,7 @@ export default function Index() {
  return (
    <MainLayout>
      <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
          <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
            {activeCollection && (
              <div className="flex gap-3 items-center">
@ -60,7 +60,7 @@ export default function Index() {
                    style={{ color: activeCollection?.color }}
                    className="sm:w-8 sm:h-8 w-6 h-6 mt-3 drop-shadow"
                  />
-                  <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold w-full py-1 break-words hyphens-auto">
+                  <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold w-full py-1 break-words hyphens-auto">
                    {activeCollection?.name}
                  </p>
                </div>
@ -116,7 +116,7 @@ export default function Index() {
            ) : null}
          </div>

-          <div className="text-gray-600 flex justify-between items-end gap-5">
+          <div className="text-gray-600 dark:text-sky-400 flex justify-between items-end gap-5">
            <p>{activeCollection?.description}</p>
            <div className="flex items-center gap-2">
              <div className="relative">
@ -128,7 +128,7 @@ export default function Index() {
                  <FontAwesomeIcon
                    icon={faSort}
                    id="sort-dropdown"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
                  />
                </div>

@ -150,7 +150,7 @@ export default function Index() {
                    icon={faEllipsis}
                    id="expand-dropdown"
                    title="More"
-                    className="w-5 h-5 text-gray-500"
+                    className="w-5 h-5 text-gray-500 dark:text-sky-400"
                  />
                </div>
                {expandDropdown ? (
--- a/pages/collections/index.tsx
+++ b/pages/collections/index.tsx
@ -37,9 +37,9 @@ export default function Collections() {
            <div className="flex gap-2">
              <FontAwesomeIcon
                icon={faFolder}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
              />
-              <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+              <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
                All Collections
              </p>
            </div>
@ -52,7 +52,7 @@ export default function Collections() {
                <FontAwesomeIcon
                  icon={faEllipsis}
                  id="expand-dropdown"
-                  className="w-5 h-5 text-gray-500"
+                  className="w-5 h-5 text-gray-500 dark:text-sky-500"
                />
              </div>

@ -86,12 +86,12 @@ export default function Collections() {
            <div
              onClick={() => setSortDropdown(!sortDropdown)}
              id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
            >
              <FontAwesomeIcon
                icon={faSort}
                id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-sky-500"
              />
            </div>

@ -111,7 +111,7 @@ export default function Collections() {
          })}

          <div
-            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
+            className="p-5 self-stretch bg-gradient-to-tr from-sky-100 dark:from-sky-800 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
            onClick={() => {
              setModal({
                modal: "COLLECTION",
@ -120,12 +120,12 @@ export default function Collections() {
              });
            }}
          >
-            <p className="text-sky-900 group-hover:opacity-0 duration-100">
+            <p className="text-sky-900 dark:text-sky-400 group-hover:opacity-0 duration-100">
              New Collection
            </p>
            <FontAwesomeIcon
              icon={faPlus}
-              className="w-8 h-8 text-sky-500 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
+              className="w-8 h-8 text-sky-500 dark:text-sky-300 group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
            />
          </div>
        </div>
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@ -83,9 +83,9 @@ export default function Dashboard() {
          <div className="flex gap-2">
            <FontAwesomeIcon
              icon={faChartSimple}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
            />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-400 font-bold">
              Dashboard
            </p>
          </div>
@ -95,24 +95,24 @@ export default function Dashboard() {

        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
          <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">{numberOfLinks}</p>
-            <p className="text-sky-900 text-xl">
+            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{numberOfLinks}</p>
+            <p className="text-sky-900 dark:text-sky-500 text-xl">
              {numberOfLinks === 1 ? "Link" : "Links"}
            </p>
          </div>

          <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">
+            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">
              {collections.length}
            </p>
-            <p className="text-sky-900 text-xl">
+            <p className="text-sky-900 dark:text-sky-500 text-xl">
              {collections.length === 1 ? "Collection" : "Collections"}
            </p>
          </div>

          <div className="flex items-baseline gap-2">
-            <p className="font-bold text-6xl text-sky-700">{tags.length}</p>
-            <p className="text-sky-900 text-xl">
+            <p className="font-bold text-6xl text-sky-700 dark:text-sky-300">{tags.length}</p>
+            <p className="text-sky-900 dark:text-sky-500 text-xl">
              {tags.length === 1 ? "Tag" : "Tags"}
            </p>
          </div>
@ -163,11 +163,11 @@ export default function Dashboard() {
              </div>
            </Disclosure>
          ) : (
-            <div className="border border-solid border-sky-100 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
-              <p className="text-center text-2xl text-sky-700">
+            <div className="border border-solid border-sky-100 dark:border-sky-800 w-full mx-auto md:w-2/3 p-10 rounded-2xl">
+              <p className="text-center text-2xl text-sky-700 dark:text-sky-300">
                No Pinned Links
              </p>
-              <p className="text-center text-sky-900 text-sm">
+              <p className="text-center text-sky-900 dark:text-sky-500 text-sm">
                You can Pin Links by clicking on the three dots on each Link and
                clicking &quot;Pin to Dashboard.&quot;
              </p>
--- a/pages/links.tsx
+++ b/pages/links.tsx
@ -24,9 +24,9 @@ export default function Links() {
          <div className="flex gap-2">
            <FontAwesomeIcon
              icon={faLink}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-300 drop-shadow"
            />
-            <p className="sm:text-4xl text-3xl capitalize text-sky-700 font-bold">
+            <p className="sm:text-4xl text-3xl capitalize text-sky-700 dark:text-sky-300 font-bold">
              All Links
            </p>
          </div>
@ -35,12 +35,12 @@ export default function Links() {
            <div
              onClick={() => setSortDropdown(!sortDropdown)}
              id="sort-dropdown"
-              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
+              className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 p-1"
            >
              <FontAwesomeIcon
                icon={faSort}
                id="sort-dropdown"
-                className="w-5 h-5 text-gray-500"
+                className="w-5 h-5 text-gray-500 dark:text-gray-200"
              />
            </div>

--- a/styles/globals.css
+++ b/styles/globals.css
@ -159,3 +159,11 @@
  width: 100%;
  height: 4rem;
 }
+
+/* Theme */
+
+@layer base {
+  body {
+    @apply dark:bg-blue-950 bg-white dark:text-white
+  }
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */

 module.exports = {
+  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
@ -10,7 +11,13 @@ module.exports = {
    "./layouts/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        blue: {
+          925: "rgb(26, 47, 96)",
+        },
+      },
+    },
  },
  plugins: [],
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -3558,6 +3558,11 @@ next-auth@^4.22.1:
    preact-render-to-string "^5.1.19"
    uuid "^8.3.2"

+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 next@13.4.12:
  version "13.4.12"
  resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"