From 4e410433ff050636dc76c058891972e836c7a0d3 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Tue, 23 Dec 2025 02:38:11 +0100
Subject: [PATCH] feat: add dark mode toggle functionality using `next-themes`.

---
 k-notes-frontend/src/components/layout.tsx    | 16 ++++----
 .../src/components/mode-toggle.tsx            | 37 +++++++++++++++++++
 k-notes-frontend/src/components/providers.tsx |  5 ++-
 3 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 k-notes-frontend/src/components/mode-toggle.tsx

diff --git a/k-notes-frontend/src/components/layout.tsx b/k-notes-frontend/src/components/layout.tsx
index 7691540..74e35e8 100644
--- a/k-notes-frontend/src/components/layout.tsx
+++ b/k-notes-frontend/src/components/layout.tsx
@@ -4,6 +4,7 @@ import { Outlet } from "react-router-dom"
 import { Button } from "@/components/ui/button";
 import { LogOut } from "lucide-react";
 import { useLogout, useUser } from "@/hooks/use-auth";
+import { ModeToggle } from "@/components/mode-toggle";
 
 export default function Layout() {
   const { mutate: logout } = useLogout();
@@ -19,14 +20,15 @@ export default function Layout() {
                    <div className="font-semibold">K-Notes</div>
                </div>
                
-               <div className="flex items-center gap-2">
-                   <div className="text-sm text-muted-foreground hidden sm:block">
-                       {user?.email}
+                   <div className="flex items-center gap-2">
+                       <div className="text-sm text-muted-foreground hidden sm:block">
+                           {user?.email}
+                       </div>
+                       <ModeToggle />
+                       <Button variant="ghost" size="icon" onClick={() => logout()} title="Logout">
+                           <LogOut className="h-4 w-4" />
+                       </Button>
                    </div>
-                   <Button variant="ghost" size="icon" onClick={() => logout()} title="Logout">
-                       <LogOut className="h-4 w-4" />
-                   </Button>
-               </div>
           </header>
           <div className="flex-1 p-4 md:p-6 bg-muted/10">
             <Outlet />
diff --git a/k-notes-frontend/src/components/mode-toggle.tsx b/k-notes-frontend/src/components/mode-toggle.tsx
new file mode 100644
index 0000000..1455a89
--- /dev/null
+++ b/k-notes-frontend/src/components/mode-toggle.tsx
@@ -0,0 +1,37 @@
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/k-notes-frontend/src/components/providers.tsx b/k-notes-frontend/src/components/providers.tsx
index 8947c1a..5fb25ab 100644
--- a/k-notes-frontend/src/components/providers.tsx
+++ b/k-notes-frontend/src/components/providers.tsx
@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter } from "react-router-dom";
 import { type ReactNode } from "react";
+import { ThemeProvider } from "next-themes";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -14,7 +15,9 @@ const queryClient = new QueryClient({
 export function Providers({ children }: { children: ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>{children}</BrowserRouter>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <BrowserRouter>{children}</BrowserRouter>
+      </ThemeProvider>
     </QueryClientProvider>
   );
 }