Merge pull request #525 from jeetvasoya21/#521

Task Done

Author: mehul-m-prajapati

src/App.css

@@ -1,3 +1,16 @@
+/* Global theme transition styles */
+:root {
+  --transition-duration: 300ms;
+}
+
+html.theme-transitioning,
+html.theme-transitioning * {
+  transition: background-color var(--transition-duration) ease-in-out,
+              color var(--transition-duration) ease-in-out,
+              border-color var(--transition-duration) ease-in-out,
+              box-shadow var(--transition-duration) ease-in-out !important;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;

src/components/Navbar.tsx

@@ -1,10 +1,12 @@
 import { NavLink, Link } from "react-router-dom";
-import { useState, useContext } from "react";
+import { useState, useContext, useRef } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { Moon, Sun, Menu, X} from "lucide-react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isThemeToggling, setIsThemeToggling] = useState(false);
+  const themeToggleRef = useRef<HTMLButtonElement>(null);
 
   const themeContext = useContext(ThemeContext);
   const userContext = useContext(UserContext);
@@ -14,6 +16,16 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
   const user = userContext?.user ?? null;
 
+  const handleThemeToggle = () => {
+    setIsThemeToggling(true);
+    toggleTheme();
+    
+    // Reset animation state after transition
+    setTimeout(() => {
+      setIsThemeToggling(false);
+    }, 300);
+  };
+
   const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
     `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${
       isActive
@@ -67,14 +79,23 @@ const Navbar: React.FC = () => {
 
           {/* Theme Toggle */}
           <button
-            onClick={toggleTheme}
-            className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            ref={themeToggleRef}
+            onClick={handleThemeToggle}
+            className="ml-2 p-2 rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
-              <Sun className="h-5 w-5 text-yellow-400" />
+              <Sun
+                className={`h-5 w-5 text-yellow-400 transition-all duration-300 ${
+                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
+                }`}
+              />
             ) : (
-              <Moon className="h-5 w-5 text-slate-700" />
+              <Moon
+                className={`h-5 w-5 text-slate-700 transition-all duration-300 ${
+                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
+                }`}
+              />
             )}
           </button>
         </div>
@@ -84,14 +105,22 @@ const Navbar: React.FC = () => {
 
           {/* Theme Toggle */}
           <button
-            onClick={toggleTheme}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            onClick={handleThemeToggle}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300"
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
-              <Sun className="h-5 w-5 text-yellow-400" />
+              <Sun
+                className={`h-5 w-5 text-yellow-400 transition-all duration-300 ${
+                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
+                }`}
+              />
             ) : (
-              <Moon className="h-5 w-5 text-white" />
+              <Moon
+                className={`h-5 w-5 text-white transition-all duration-300 ${
+                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
+                }`}
+              />
             )}
           </button>
 

src/context/ThemeContext.tsx

@@ -10,6 +10,7 @@ interface ThemeContextType {
 export const ThemeContext = createContext<ThemeContextType | null>(null);
 
 const THEME_STORAGE_KEY = 'theme';
+const TRANSITION_DURATION = 300; // milliseconds
 
 const ThemeWrapper = ({ children }: { children: ReactNode }) => {
   const [mode, setMode] = useState<'light' | 'dark'>(() => {
@@ -19,12 +20,23 @@ const ThemeWrapper = ({ children }: { children: ReactNode }) => {
 
   // Sync mode with <html> class and localStorage
   useEffect(() => {
+    // Add transition class
+    document.documentElement.classList.add('theme-transitioning');
+
+    // Apply theme change
     if (mode === 'dark') {
       document.documentElement.classList.add('dark');
     } else {
       document.documentElement.classList.remove('dark');
     }
     localStorage.setItem(THEME_STORAGE_KEY, mode);
+
+    // Remove transition class after animation completes
+    const timer = setTimeout(() => {
+      document.documentElement.classList.remove('theme-transitioning');
+    }, TRANSITION_DURATION);
+
+    return () => clearTimeout(timer);
   }, [mode]);
 
   const toggleTheme = () => {