Dark/light mode added + switcher

frontend/src/components/Footer.jsx

@@ -9,7 +9,7 @@ export default function Footer() {
     };
 
     return (
-        <footer className="flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
+        <footer className="bg-ctp-mantle flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
             <p className="text-sm text-ctp-text">
                 &copy; {currentYear} AramJonghu. All rights reserved.
             </p>

frontend/src/components/Header.jsx

@@ -1,27 +1,14 @@
 import Aku from "../assets/images/aku.png";
 
-export default function Header() {
+export default function Header({ theme }) {
+    const { theme: currentTheme, toggleTheme } = theme;
+
     const navItems = [
-        {
-            label: "Nextcloud",
-            url: "https://aramjonghu.nl/nextcloud",
-        },
-        {
-            label: "Navidrome",
-            url: "https://music.aramjonghu.nl",
-        },
-        {
-            label: "Forgejo Git",
-            url: "https://git.aramjonghu.nl",
-        },
-        {
-            label: "Stream",
-            url: "https://stream.aramjonghu.nl",
-        },
-        {
-            label: "SearXNG",
-            url: "https://xng.aramjonghu.nl",
-        },
+        { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
+        { label: "Navidrome", url: "https://music.aramjonghu.nl" },
+        { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
+        { label: "Stream", url: "https://stream.aramjonghu.nl" },
+        { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
     ];
 
     const goHome = () => {
@@ -29,7 +16,7 @@ export default function Header() {
     };
 
     return (
-        <header className="flex justify-center items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
+        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
             <img
                 className="size-16 cursor-pointer"
                 src={Aku}
@@ -48,6 +35,15 @@ export default function Header() {
                     </a>
                 ))}
             </nav>
+
+            <div>
+                <button
+                    className="text-ctp-text hover:text-ctp-green-900 border rounded border-ctp-white-800 hover:border-ctp-green-900 cursor-pointer px-3 py-1"
+                    onClick={toggleTheme}
+                >
+                    {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
+                </button>
+            </div>
         </header>
     );
 }

frontend/src/components/Layout.jsx

@@ -1,10 +1,13 @@
 import Footer from "./Footer";
 import Header from "./Header";
+import { useTheme } from "../hooks/useTheme";
 
 export default function Layout({ children }) {
+    const theme = useTheme();
+
     return (
         <div className="flex flex-col w-screen min-h-screen bg-ctp-base">
-            <Header />
+            <Header theme={theme} />
             <main className="flex-1">{children}</main>
             <Footer />
         </div>