Dark/light mode added + switcher

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>
     );
 }