feature(web): Add dark mode support

1 files changed, 28 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
index f931b63e..bf56b805 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
@@ -7,8 +7,32 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, MoreHorizontal } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { LogOut, Moon, MoreHorizontal, Sun } from "lucide-react";
 import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+
+function DarkModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  let comp;
+  if (theme == "dark") {
+    comp = (
+      <button onClick={() => setTheme("light")}>
+        <Sun className="size-4" />
+        <p>Light Mode</p>
+      </button>
+    );
+  } else {
+    comp = (
+      <button onClick={() => setTheme("dark")}>
+        <Moon className="size-4" />
+        <p>Dark Mode</p>
+      </button>
+    );
+  }
+  return <Slot className="flex flex-row gap-2">{comp}</Slot>;
+}
 
 export default function SidebarProfileOptions() {
   return (
@@ -19,6 +43,9 @@ export default function SidebarProfileOptions() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem>
+          <DarkModeToggle />
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() =>
             signOut({