Fix #521: add smooth theme transition animation

Author: Pragzh

src/components/Navbar.tsx

@@ -64,9 +64,9 @@ const Navbar: React.FC = () => {
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
-              <Sun className="h-5 w-5 text-yellow-400" />
+              <Sun key="sun-icon" className="theme-toggle-icon h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon className="h-5 w-5 text-slate-700" />
+              <Moon key="moon-icon" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" />
             )}
           </button>
         </div>
@@ -83,7 +83,7 @@ const Navbar: React.FC = () => {
             {mode === "dark" ? (
               <Sun className="h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon className="h-5 w-5 text-white" />
+              <Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" />
             )}
           </button>
 

src/context/ThemeContext.tsx

@@ -27,9 +27,15 @@ const ThemeWrapper = ({ children }: { children: ReactNode }) => {
     localStorage.setItem(THEME_STORAGE_KEY, mode);
   }, [mode]);
 
-  const toggleTheme = () => {
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
-  };
+ const toggleTheme = () => {
+  document.documentElement.classList.add("theme-transitioning");
+
+  window.setTimeout(() => {
+    document.documentElement.classList.remove("theme-transitioning");
+  }, 650);
+
+  setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+};
 
   const muiTheme: Theme = useMemo(
     () => createTheme({ palette: { mode } }),

src/index.css

@@ -89,3 +89,37 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, transform;
+  transition-duration: 600ms;
+  transition-timing-function: ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transitioning,
+  html.theme-transitioning *,
+  html.theme-transitioning *::before,
+  html.theme-transitioning *::after {
+    transition-duration: 0ms;
+  }
+}
+
+@keyframes theme-icon-pop {
+  0% {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+.theme-toggle-icon {
+  animation: theme-icon-pop 500ms ease-out;
+}