Bug Fixed- DarkMode Features

Author: Jish261203

client/package-lock.json

@@ -1,48 +1,45 @@
-import React, { useState,useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../middleware/AuthContext";
 import ThemeToggle from "./ThemeToggle";
-import gsap from 'gsap'
-import {tl} from './gsap.js'
+import gsap from 'gsap';
+import { tl } from './gsap.js';
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const location = useLocation(); // Get the current location
 
-//gsap starts
-useEffect(() => {
+  // gsap starts
+  useEffect(() => {
     const ctx = gsap.context(() => {
-    tl.fromTo('.navGsap',
-      {
+      tl.fromTo('.navGsap', {
         y: -100, // Starting position (from)
         opacity: 0, // Starting opacity (from)
-      },
-      {
+      }, {
         y: 0, // Ending position (to)
         opacity: 1, // Ending opacity (to)
         duration: 0.5, // Animation duration
         ease: "sine.in", // Easing function
-        stagger: 0.1, 
-        
-      }
-    );
-  });
-
-  return () => ctx.revert(); // Cleanup when the component unmounts
-}, []);
-
-//gsap ends
-
+        stagger: 0.1,
+      });
+    });
 
+    return () => ctx.revert(); // Cleanup when the component unmounts
+  }, []);
+  // gsap ends
 
   const handleLogout = () => {
     logout();
     navigate("/login");
   };
 
+  // Check if the current route is Register or Login
+  const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
+
   return (
-    <header className="bg-black text-white shadow-lg">
+    <header className={`bg-black text-white shadow-lg ${isAuthPage ? 'theme-light' : ''}`}>
       <div className="container mx-auto flex justify-between items-center px-6 py-4">
         {/* Logo */}
         <div className="navGsap">
@@ -113,9 +110,11 @@ useEffect(() => {
         </nav>
 
         {/* Theme Toggle */}
-        <div className="hidden md:block">
-          <ThemeToggle />
-        </div>
+        {!isAuthPage && (
+          <div className="hidden md:block">
+            <ThemeToggle />
+          </div>
+        )}
 
         {/* Mobile Menu Button */}
         <button

client/src/components/Header.jsx

@@ -1,38 +1,50 @@
-import React from "react";
-import UserCards from "./UserCards";
+import React, { useEffect, useState } from "react";
+import UserCard from "./UserCards";
 
 const OurAlumni = () => {
+	const [isDarkMode, setIsDarkMode] = useState(false);
 
-  const user = {
-    name: "AbhiShek Rao",
-    email: "johndoe@example.com",
-    avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
-    city: "Gorakhpur",
-    role: "Web Developer",
-    passOut: "MCA 2025",
-  };
-
-  return (
-    <>
-      <div className="container mx-auto px-4">
-        <div className="flex flex-wrap -mx-4" style={{marginTop:"10vh"}}>
-        <div className="w-full md:w-1/2 xl:w-1/3 p
-        x-4 mb-8">
-            <UserCards user={user} />
-          </div>
-          <div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
-            <UserCards user={user} />
-          </div>
-          <div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
-            <UserCards user={user} />
-  
-          </div>
-          </div>
-
-    </div>
-</>
-   
-  );
+	useEffect(() => {
+		const matchDark = window.matchMedia("(prefers-color-scheme: dark)");
+		setIsDarkMode(matchDark.matches);
+
+		const listener = (e) => setIsDarkMode(e.matches);
+		matchDark.addListener(listener);
+
+		return () => matchDark.removeListener(listener);
+	}, []);
+
+	const cardStyles = {
+		backgroundColor: isDarkMode ? "#1a1a1a" : "#ffffff",
+		color: isDarkMode ? "#f5f5f5" : "#000000",
+	};
+
+	const user = {
+		name: "AbhiShek Rao",
+		email: "johndoe@example.com",
+		avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
+		city: "Gorakhpur",
+		role: "Web Developer",
+		passOut: "MCA 2025",
+	};
+
+	return (
+		<>
+			<div className="container mx-auto px-4">
+				<div className="flex flex-wrap -mx-4" style={{ marginTop: "10vh" }}>
+					<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
+						<UserCard user={user} cardStyles={cardStyles} />
+					</div>
+					<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
+						<UserCard user={user} cardStyles={cardStyles} />
+					</div>
+					<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
+						<UserCard user={user} cardStyles={cardStyles} />
+					</div>
+				</div>
+			</div>
+		</>
+	);
 };
 
 export default OurAlumni;