Enhance theming and UI components: Introduce a new dark cyan theme in globals.css, update layout to utilize ThemeProvider for consistent theming, and refactor button and card components to use CSS variables for styling. Improve navigation and alert components with dynamic styles based on theme variables, ensuring a cohesive user experience across the application.

components/navigation/Navigation.tsx

@@ -5,7 +5,7 @@ import { useSession, signOut } from "next-auth/react";
 import { useState } from "react";
 import { usePathname } from "next/navigation";
 import PlayerStats from "@/components/profile/PlayerStats";
-import { Button } from "@/components/ui";
+import { Button, ThemeToggle } from "@/components/ui";
 
 interface UserData {
   username: string;
@@ -42,17 +42,30 @@ export default function Navigation({
   const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";
 
   return (
-    <nav className="w-full fixed top-0 left-0 z-50 px-4 sm:px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
+    <nav
+      className="w-full fixed top-0 left-0 z-50 px-4 sm:px-8 py-3 backdrop-blur-sm border-b"
+      style={{
+        backgroundColor:
+          "color-mix(in srgb, var(--background) 80%, transparent)",
+        borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+      }}
+    >
       <div className="max-w-7xl mx-auto flex items-center justify-between">
         {/* Logo - Left */}
         <Link
           href="/"
           className="flex flex-col hover:opacity-80 transition-opacity"
         >
-          <div className="text-white text-lg sm:text-xl font-gaming font-bold tracking-tight">
+          <div
+            className="text-lg sm:text-xl font-gaming font-bold tracking-tight"
+            style={{ color: "var(--foreground)" }}
+          >
             GAME.OF.TECH
           </div>
-          <div className="text-pixel-gold text-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
+          <div
+            className="text-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide"
+            style={{ color: "var(--accent-color)" }}
+          >
             <span>✦</span>
             <span>Peaksys</span>
             <span>✦</span>
@@ -63,26 +76,54 @@ export default function Navigation({
         <div className="hidden md:flex items-center gap-6">
           <Link
             href="/"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
+            className="transition text-xs font-normal uppercase tracking-widest"
+            style={{ color: "var(--foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--foreground)")
+            }
           >
             HOME
           </Link>
           <Link
             href="/events"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
+            className="transition text-xs font-normal uppercase tracking-widest"
+            style={{ color: "var(--foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--foreground)")
+            }
           >
             EVENTS
           </Link>
           <Link
             href="/leaderboard"
-            className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
+            className="transition text-xs font-normal uppercase tracking-widest"
+            style={{ color: "var(--foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--foreground)")
+            }
           >
             LEADERBOARD
           </Link>
           {isAdmin && (
             <Link
               href="/admin"
-              className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest"
+              className="transition text-xs font-normal uppercase tracking-widest"
+              style={{ color: "var(--accent-color)" }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.color = "var(--accent)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.color = "var(--accent-color)")
+              }
             >
               ADMIN
             </Link>
@@ -91,6 +132,11 @@ export default function Navigation({
 
         {/* Right Side */}
         <div className="flex items-center gap-2 sm:gap-4">
+          {/* Theme Toggle */}
+          <div className="hidden md:block">
+            <ThemeToggle />
+          </div>
+
           {/* PlayerStats - Hidden on mobile */}
           {isAuthenticated && !isAuthPage && (
             <div className="hidden lg:block">
@@ -113,7 +159,14 @@ export default function Navigation({
               <>
                 <Link
                   href="/login"
-                  className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
+                  className="transition text-xs font-normal uppercase tracking-widest"
+                  style={{ color: "var(--foreground)" }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.color = "var(--accent-color)")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.color = "var(--foreground)")
+                  }
                 >
                   Connexion
                 </Link>
@@ -129,7 +182,14 @@ export default function Navigation({
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="md:hidden text-white hover:text-pixel-gold transition p-2"
+            className="md:hidden transition p-2"
+            style={{ color: "var(--foreground)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.color = "var(--accent-color)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.color = "var(--foreground)")
+            }
             aria-label="Toggle menu"
           >
             <svg
@@ -153,28 +213,61 @@ export default function Navigation({
 
       {/* Mobile Menu */}
       {isMenuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-sm border-b border-gray-800/30">
+        <div
+          className="md:hidden absolute top-full left-0 w-full backdrop-blur-sm border-b"
+          style={{
+            backgroundColor:
+              "color-mix(in srgb, var(--background) 95%, transparent)",
+            borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+          }}
+        >
           <div className="px-4 py-4 flex flex-col gap-4">
+            {/* Theme Toggle Mobile */}
+            <div className="md:hidden">
+              <ThemeToggle />
+            </div>
+
             {/* Mobile Navigation Links */}
             <div className="flex flex-col gap-3">
               <Link
                 href="/"
                 onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
+                className="transition text-xs font-normal uppercase tracking-widest py-2"
+                style={{ color: "var(--foreground)" }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.color = "var(--accent-color)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.color = "var(--foreground)")
+                }
               >
                 HOME
               </Link>
               <Link
                 href="/events"
                 onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
+                className="transition text-xs font-normal uppercase tracking-widest py-2"
+                style={{ color: "var(--foreground)" }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.color = "var(--accent-color)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.color = "var(--foreground)")
+                }
               >
                 EVENTS
               </Link>
               <Link
                 href="/leaderboard"
                 onClick={() => setIsMenuOpen(false)}
-                className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
+                className="transition text-xs font-normal uppercase tracking-widest py-2"
+                style={{ color: "var(--foreground)" }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.color = "var(--accent-color)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.color = "var(--foreground)")
+                }
               >
                 LEADERBOARD
               </Link>
@@ -182,7 +275,14 @@ export default function Navigation({
                 <Link
                   href="/admin"
                   onClick={() => setIsMenuOpen(false)}
-                  className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest py-2"
+                  className="transition text-xs font-normal uppercase tracking-widest py-2"
+                  style={{ color: "var(--accent-color)" }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.color = "var(--accent)")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.color = "var(--accent-color)")
+                  }
                 >
                   ADMIN
                 </Link>
@@ -191,13 +291,25 @@ export default function Navigation({
 
             {/* Mobile PlayerStats */}
             {isAuthenticated && !isAuthPage && (
-              <div className="lg:hidden pt-2 border-t border-gray-800/30">
+              <div
+                className="lg:hidden pt-2 border-t"
+                style={{
+                  borderColor:
+                    "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+                }}
+              >
                 <PlayerStats initialUserData={initialUserData} />
               </div>
             )}
 
             {/* Mobile Auth Buttons */}
-            <div className="flex flex-col gap-3 pt-2 border-t border-gray-800/30">
+            <div
+              className="flex flex-col gap-3 pt-2 border-t"
+              style={{
+                borderColor:
+                  "color-mix(in srgb, var(--gray-800) 30%, transparent)",
+              }}
+            >
               {isAuthenticated ? (
                 <Button
                   onClick={() => {
@@ -215,7 +327,14 @@ export default function Navigation({
                   <Link
                     href="/login"
                     onClick={() => setIsMenuOpen(false)}
-                    className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
+                    className="transition text-xs font-normal uppercase tracking-widest py-2"
+                    style={{ color: "var(--foreground)" }}
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.color = "var(--accent-color)")
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.color = "var(--foreground)")
+                    }
                   >
                     Connexion
                   </Link>