added theme toggle button to the website

components/Footer.jsx

@@ -9,6 +9,8 @@ import {
   FaGithub,
 } from "react-icons/fa";
 
+import { ThemeSwitcher } from "./ThemeSwitcher";
+
 function Footer() {
   const socials = [
     {
@@ -103,6 +105,9 @@ function Footer() {
           ))}
         </div>
       </div>
+      <div className="flex justify-end mr-20">
+        <ThemeSwitcher />
+      </div>
     </footer>
   );
 }

components/ThemeSwitcher.jsx

@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "@heroicons/react/24/solid";
+import { useState, useEffect } from "react";
+
+export const ThemeSwitcher = () => {
+  const { theme, setTheme } = useTheme();
+
+  // handle hydration error
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <button
+      aria-label="Toggle Dark Mode"
+      type="button"
+      className="flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-zinc-300 dark:hover:bg-zinc-700"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      {theme === "dark" ? (
+        <SunIcon className="h-5 w-5 text-orange-300" />
+      ) : (
+        <MoonIcon className="h-5 w-5 text-slate-800" />
+      )}
+    </button>
+  );
+};