Merge pull request #57 from Shreyanshi210205/dark_mode

feat(theme): implement dark mode support across the application

Author: 04shubham7

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!

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,28 +94,36 @@ 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
                 key={link.name}
                 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"

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 *));

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 />);

frontend/src/pages/Browse.tsx

@@ -172,7 +172,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>
@@ -182,10 +182,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>

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"

frontend/src/pages/Dashboard.tsx

@@ -36,50 +36,50 @@ 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>
             ))}
           </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>
             ))}
           </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>

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

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

frontend/src/pages/Sell.tsx

@@ -63,20 +63,20 @@ 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>
         <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>
         <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>