From 77521f47b3762b183afddc873ade063bd619a3a2 Mon Sep 17 00:00:00 2001
From: Shreyanshi210205 <shreyanshi.230101129@iiitbh.ac.in>
Date: Mon, 27 Oct 2025 09:56:07 +0530
Subject: [PATCH] feat(theme): implement dark mode support across the
 application

---
 frontend/src/components/Home.tsx     |  2 +-
 frontend/src/components/Navbar.tsx   | 61 +++++++++++++++++++++++-----
 frontend/src/index.css               |  7 ++++
 frontend/src/main.tsx                |  3 ++
 frontend/src/pages/Browse.tsx        |  6 +--
 frontend/src/pages/Cart.jsx          |  2 +-
 frontend/src/pages/Dashboard.tsx     | 32 +++++++--------
 frontend/src/pages/Payment.jsx       |  2 +-
 frontend/src/pages/ProductDetail.tsx |  6 +--
 frontend/src/pages/Sell.tsx          |  8 ++--
 frontend/tailwind.config.ts          |  6 ++-
 11 files changed, 94 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 5b5494c..ad19fda 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -32,7 +32,7 @@ const Hero: React.FC = () => {
         {/* Left Content */}
     <div className="space-y-6 text-center lg:text-left">
 
-  <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold text-gray-800 leading-tight tracking-tighter ml-2">
+  <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold text-gray-800 leading-tight tracking-tighter ml-2 dark:text-gray-200">
     UniLoot - Your<br />
     <span className="text-blue-800">Campus Marketplace,</span><br />
     Simplified!
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 89c1703..b488e81 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,13 +1,33 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import { Menu, X } from "lucide-react";
+import { Menu, X, Moon, Sun } from "lucide-react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+
+    const getInitialTheme = () =>
+      typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+        ? ("dark" as const)
+        : ("light" as const);
+
+    const [theme, setTheme] = useState<"light" | "dark">(getInitialTheme);
   const navigate = useNavigate();
   const location = useLocation();
 
+  useEffect(() => {
+    const root = window.document.documentElement;
+    if (theme === "dark") root.classList.add("dark");
+    else root.classList.remove("dark");
+    try {
+      localStorage.setItem("theme", theme);
+    } catch (err) {
+      // ignore (e.g. storage not available)
+    }
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+
   const handleNavClick = (path: string) => {
     navigate(path);
     setIsOpen(false);
@@ -20,11 +40,11 @@ const Navbar: React.FC = () => {
   ];
 
   return (
-    <nav className="w-full bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 z-50">
+    <nav className="w-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm fixed top-0 left-0 z-50 transition-colors">
       <div className="container mx-auto px-6 py-3 flex items-center justify-between">
         <Link
           to="/"
-          className="text-2xl font-extrabold text-blue-800 tracking-tight hover:opacity-80 transition"
+          className="text-2xl font-extrabold text-blue-800 tracking-tight hover:opacity-80 transition dark:text-blue-300"
         >
           UniLoot
         </Link>
@@ -36,8 +56,8 @@ const Navbar: React.FC = () => {
               onClick={() => handleNavClick(link.path)}
               className={`text-base font-semibold transition-colors duration-300 ${
                 location.pathname === link.path
-                  ? "text-blue-800"
-                  : "text-gray-700 hover:text-blue-800"
+                  ? "text-blue-800 dark:text-blue-300"
+                  : "text-gray-700 dark:text-gray-300 hover:text-blue-800 dark:hover:text-blue-300"
               }`}
             >
               {link.name}
@@ -46,9 +66,20 @@ const Navbar: React.FC = () => {
         </div>
 
         <div className="hidden md:flex items-center gap-3">
+          <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
+          >
+            {theme === "light" ? (
+              <Sun size={20} className="transition-transform duration-300 rotate-0 text-gray-700 dark:text-gray-200" />
+            ) : (
+              <Moon size={20} className="transition-transform duration-300 rotate-0 text-gray-700 dark:text-gray-200" />
+            )}
+          </button>
+
           <Button
             variant="outline"
-            className="border-2 border-blue-800 text-blue-800 hover:bg-blue-800 hover:text-white transition"
+            className="border-2 border-blue-800 text-blue-800 hover:bg-blue-800 hover:text-white transition dark:text-blue-300"
             onClick={() => handleNavClick("/signin")}
           >
             Sign In
@@ -63,14 +94,14 @@ const Navbar: React.FC = () => {
 
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="md:hidden text-blue-800 focus:outline-none"
+          className="md:hidden text-blue-800 dark:text-blue-300 focus:outline-none"
         >
           {isOpen ? <X size={28} /> : <Menu size={28} />}
         </button>
       </div>
 
       {isOpen && (
-        <div className="md:hidden bg-white border-t border-gray-200 shadow-md">
+        <div className="md:hidden bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-700 shadow-md">
           <div className="flex flex-col items-center py-4 space-y-4">
             {navLinks.map((link) => (
               <button
@@ -78,13 +109,21 @@ const Navbar: React.FC = () => {
                 onClick={() => handleNavClick(link.path)}
                 className={`text-lg font-semibold ${
                   location.pathname === link.path
-                    ? "text-blue-800"
-                    : "text-gray-700 hover:text-blue-800"
+                    ? "text-blue-800 dark:text-blue-300"
+                    : "text-gray-700 dark:text-gray-300 hover:text-blue-800 dark:hover:text-blue-300"
                 }`}
               >
                 {link.name}
               </button>
             ))}
+
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-full border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
+            >
+              {theme === "light" ? <Sun size={22} /> : <Moon size={22} />}
+            </button>
+
             <div className="flex flex-col gap-2 pt-3 w-4/5">
               <Button
                 variant="outline"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3d552a6..0014883 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,2 +1,9 @@
 @import "tailwindcss";
 
+html,body {
+  @apply bg-white text-gray-900  duration-300;
+}
+.dark body{
+  @apply bg-gray-950 text-gray-100 duration-300;
+}
+@custom-variant dark (&:where(.dark, .dark *));
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 68176a7..4a0c519 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,4 +2,7 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
+if (localStorage.getItem("theme") === "dark") {
+  document.documentElement.classList.add("dark");
+}
 createRoot(document.getElementById("root")!).render(<App />);
diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index 69ef775..fdb8eb1 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -27,7 +27,7 @@ const Browse = () => {
   );
 
   return (
-    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 px-4 py-8">
+  <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 px-4 py-8 dark:bg-gradient-to-br dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
       <div className="absolute inset-0 -z-10">
         <div className="absolute -top-32 -left-32 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-3xl animate-blob"></div>
         <div className="absolute top-0 -right-32 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-3xl animate-blob animation-delay-2000"></div>
@@ -37,10 +37,10 @@ const Browse = () => {
       <div className="container mx-auto max-w-7xl">
         {/* Header */}
         <div className="mb-8 text-center">
-          <h1 className="text-4xl md:text-5xl font-extrabold text-blue-800 mb-4">
+          <h1 className="text-4xl md:text-5xl font-extrabold text-blue-800 mb-4 dark:text-blue-300">
             Browse Products
           </h1>
-          <p className="text-lg text-gray-600">
+          <p className="text-lg text-gray-600 dark:text-gray-300">
             Find what you need from fellow students
           </p>
         </div>
diff --git a/frontend/src/pages/Cart.jsx b/frontend/src/pages/Cart.jsx
index a48c0b2..cacdf93 100644
--- a/frontend/src/pages/Cart.jsx
+++ b/frontend/src/pages/Cart.jsx
@@ -61,7 +61,7 @@ const Cart = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4 sm:px-6 lg:px-8 dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
       {/* Header */}
       <motion.div
         className="max-w-6xl mx-auto text-center mb-8"
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index ac96368..ff63307 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -36,20 +36,20 @@ const handleBuyClick = () => {
   };
 
   return (
-    <section className="w-full min-h-[calc(100vh-80px)] bg-blue-50 py-12 px-6 text-black">
+    <section className="w-full min-h-[calc(100vh-80px)] bg-blue-50 dark:bg-slate-900 py-12 px-6 text-gray-900 dark:text-gray-200 transition-colors">
       <div className="container mx-auto space-y-12">
-        <h1 className="text-4xl font-extrabold text-gray-800 mb-6">
+        <h1 className="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6">
           Welcome Back, Student!
         </h1>
 
-        <div className="bg-white rounded-2xl shadow-lg p-6">
+        <div className="bg-white rounded-2xl shadow-lg p-6 dark:bg-slate-800 dark:border dark:border-slate-700">
           <div className="flex items-center gap-3 mb-4">
-            <ShoppingCart className="w-6 h-6 text-blue-800" />
-            <h2 className="text-2xl font-semibold text-gray-800">Bought Items</h2>
+            <ShoppingCart className="w-6 h-6 text-blue-800 dark:text-blue-300" />
+            <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">Bought Items</h2>
           </div>
           <ul className="space-y-2">
             {boughtItems.map(item => (
-              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition">
+              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 dark:bg-slate-700 dark:hover:bg-slate-600 hover:bg-blue-100 transition">
                 <span>{item.name}</span>
                 <span className="font-semibold">{item.price}</span>
               </li>
@@ -57,14 +57,14 @@ const handleBuyClick = () => {
           </ul>
         </div>
 
-        <div className="bg-white rounded-2xl shadow-lg p-6">
+        <div className="bg-white rounded-2xl shadow-lg p-6 dark:bg-slate-800 dark:border dark:border-slate-700">
           <div className="flex items-center gap-3 mb-4">
-            <Tag className="w-6 h-6 text-blue-800" />
-            <h2 className="text-2xl font-semibold text-gray-800">Sold Items</h2>
+            <Tag className="w-6 h-6 text-blue-800 dark:text-blue-300" />
+            <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">Sold Items</h2>
           </div>
           <ul className="space-y-2">
             {soldItems.map(item => (
-              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition">
+              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 dark:bg-slate-700 dark:hover:bg-slate-600 hover:bg-blue-100 transition">
                 <span>{item.name}</span>
                 <span className="font-semibold">{item.price}</span>
               </li>
@@ -72,14 +72,14 @@ const handleBuyClick = () => {
           </ul>
         </div>
 
-        <div className="bg-white rounded-2xl shadow-lg p-6">
+        <div className="bg-white rounded-2xl shadow-lg p-6 dark:bg-slate-800 dark:border dark:border-slate-700">
           <div className="flex items-center gap-3 mb-4">
-            <Clock className="w-6 h-6 text-blue-800" />
-            <h2 className="text-2xl font-semibold text-gray-800">Current Bids</h2>
+            <Clock className="w-6 h-6 text-blue-800 dark:text-blue-300" />
+            <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100">Current Bids</h2>
           </div>
           <ul className="space-y-2">
             {currentBids.map(item => (
-              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 hover:bg-blue-100 transition">
+              <li key={item.id} className="flex justify-between p-3 rounded-lg bg-blue-50 dark:bg-slate-700 dark:hover:bg-slate-600 hover:bg-blue-100 transition">
                 <span>{item.name}</span>
                 <span className="font-semibold">{item.bid}</span>
               </li>
@@ -88,10 +88,10 @@ const handleBuyClick = () => {
         </div>
 
         <div className="flex gap-4 justify-center lg:justify-start">
-          <Button className="bg-blue-800 text-white hover:bg-blue-700 px-6 py-3 rounded-lg"
+          <Button className="bg-blue-800 text-white hover:bg-blue-700 px-6 py-3 rounded-lg dark:bg-blue-700 dark:hover:bg-blue-600"
           onClick={handleBuyClick}
           >Browse Marketplace</Button>
-          <Button className="border-4 border-blue-800 text-blue-800 hover:bg-blue-800 hover:text-white px-6 py-3 rounded-lg"
+          <Button className="border-4 border-blue-800 text-blue-800 hover:bg-blue-800 hover:text-white px-6 py-3 rounded-lg dark:border-blue-600 dark:text-blue-300 dark:hover:bg-blue-700"
           onClick={handleSellClick}
           >Sell an Item</Button>
         </div>
diff --git a/frontend/src/pages/Payment.jsx b/frontend/src/pages/Payment.jsx
index 9e02637..a2ae629 100644
--- a/frontend/src/pages/Payment.jsx
+++ b/frontend/src/pages/Payment.jsx
@@ -79,7 +79,7 @@ const Payment = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 py-8 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 py-8 px-4 sm:px-6 lg:px-8 dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
       <div className="max-w-6xl mx-auto">
         {/* Header */}
         <motion.div
diff --git a/frontend/src/pages/ProductDetail.tsx b/frontend/src/pages/ProductDetail.tsx
index 7465e0b..d004321 100644
--- a/frontend/src/pages/ProductDetail.tsx
+++ b/frontend/src/pages/ProductDetail.tsx
@@ -111,7 +111,7 @@ export default function ProductDetailsPage() {
   };
 
   return (
-    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 px-4 py-10">
+    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 px-4 py-10 dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
       <div className="absolute inset-0 -z-10">
         <div className="absolute -top-32 -left-32 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-3xl animate-blob"></div>
         <div className="absolute top-0 -right-32 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-3xl animate-blob animation-delay-2000"></div>
@@ -123,13 +123,13 @@ export default function ProductDetailsPage() {
         <Button
           onClick={() => navigate(-1)}
           variant="outline"
-          className="flex items-center mb-6 border-2 border-blue-700 text-blue-700 hover:bg-blue-700 hover:text-white"
+          className="flex items-center mb-6 border-2 border-blue-700 text-blue-700 hover:bg-blue-700 hover:text-white dark:text-blue-300"
         >
           <ArrowLeft className="mr-2 h-4 w-4" /> Back
         </Button>
 
         {/* Product Content */}
-        <div className="flex flex-col md:flex-row bg-white rounded-2xl shadow-lg overflow-hidden border border-blue-100">
+        <div className="flex flex-col md:flex-row bg-white rounded-2xl shadow-lg overflow-hidden border border-blue-100 dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
           {/* Left- Image Section */}
           <div className="flex-1 p-6 flex flex-col items-center">
             <img
diff --git a/frontend/src/pages/Sell.tsx b/frontend/src/pages/Sell.tsx
index d0d2a1c..e400e84 100644
--- a/frontend/src/pages/Sell.tsx
+++ b/frontend/src/pages/Sell.tsx
@@ -63,7 +63,7 @@ const Sell = () => {
   };
 
   return (
-    <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center px-4 py-12">
+  <div className="relative min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center px-4 py-12 dark:bg-gradient-to-br dark:from-slate-900 dark:via-black dark:to-slate-900 dark:text-gray-200">
       {/* Background blobs */}
       <div className="absolute inset-0 -z-10">
         <div className="absolute -top-32 -left-32 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-3xl animate-blob"></div>
@@ -71,12 +71,12 @@ const Sell = () => {
         <div className="absolute bottom-0 left-1/4 w-96 h-96 bg-blue-400 rounded-full opacity-20 blur-2xl animate-blob animation-delay-4000"></div>
       </div>
 
-      <Card className="w-full max-w-2xl bg-white/90 backdrop-blur-md border-2 border-blue-100 shadow-xl">
+  <Card className="w-full max-w-2xl bg-white/90 backdrop-blur-md border-2 border-blue-100 shadow-xl dark:bg-slate-800/90 dark:border-slate-700">
         <CardHeader className="text-center space-y-2">
-          <CardTitle className="text-4xl font-extrabold text-blue-800">
+          <CardTitle className="text-4xl font-extrabold text-blue-800 dark:text-blue-300">
             Sell Your Item
           </CardTitle>
-          <CardDescription className="text-lg text-gray-600">
+          <CardDescription className="text-lg text-gray-600 dark:text-gray-300">
             List your items and connect with buyers on campus
           </CardDescription>
         </CardHeader>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index b976b0d..371ccf4 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  // ... your existing config (content, darkMode, etc.)
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}"
+  ],
+  darkMode: "class",
   theme: {
     extend: {
       keyframes: {