Wip on dark theme

components/ui/header.tsx

@@ -32,6 +32,14 @@ const ThemeToggle = dynamic(() => import('./theme-toggle').then(mod => mod.defau
   ssr: false,
 });
 
+const ThemeToggleWrapper = () => {
+  return (
+    <div className="rounded-md px-3 py-2 text-sm font-medium transition-colors text-gray-300 hover:bg-gray-700 hover:text-white">
+      <ThemeToggle />
+    </div>
+  );
+};
+
 export function Header({ className, isLoggedIn = false, isAdmin = false }: HeaderProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [profileOpen, setProfileOpen] = useState(false)
@@ -108,9 +116,7 @@ export function Header({ className, isLoggedIn = false, isAdmin = false }: Heade
                         </Link>
                       ))}
                     </div>
-                    <div className="rounded-md px-3 py-2 text-sm font-medium transition-colors text-gray-300 hover:bg-gray-700 hover:text-white">
-                      <ThemeToggle />
-                    </div>
+                    <ThemeToggleWrapper />
                   </div>
                 </div>
               )}