light mode hotfix

src/app/globals.css

@@ -150,16 +150,6 @@
     text-decoration: none;
   }
 
-  /* Removed macOS day/night mode detection to use our app's theme setting exclusively */
-}
-
-/* Custom styling for AppKit button text */
-:root:not(.dark) appkit-button wui-text[variant="paragraph-600"] {
-  color: #333333 !important;
-}
-
-:root:not(.dark) appkit-button {
-  --wui-color-inherit: #333333 !important;
 }
 
 @layer base {

src/app/page.tsx

@@ -5,11 +5,9 @@ import * as React from "react";
 import { useAccount } from "wagmi";
 
 import { RootLayout } from "@/components/chat/RootLayout";
-import { DisconnectedMessage } from "@/components/shared/DIsconnectedMessage";
+import { DisconnectedCard } from "@/components/shared/DisconnectedCard";
 import MatrixCanvas from "@/components/shared/MatrixCanvas";
 
-import { useDisconnectedDarkMode } from "@/hooks/useDisconnectedDarkMode";
-
 import { useChat } from "@/contexts/chat-context";
 
 export default function HomePage() {
@@ -20,16 +18,14 @@ export default function HomePage() {
     handleNavigateToRoot();
   }, []);
 
-  useDisconnectedDarkMode(isConnected);
-
   return (
     <>
       <div className="fixed inset-0 z-0"></div>
 
       {!isConnected && (
         <>
           <MatrixCanvas />
-          <DisconnectedMessage />
+          <DisconnectedCard />
         </>
       )}
 

src/components/chat/ChatLayout.tsx

@@ -9,7 +9,7 @@ import { Loader2 } from "lucide-react";
 
 import ChatInput from "@/components/chat/chat-input";
 import { Messages } from "@/components/chat/messages";
-import { ChatDisconnectedMessage } from "@/components/shared/DIsconnectedMessage";
+import { ChatDisconnectedCard } from "@/components/shared/DisconnectedCard";
 
 import { useLayoutState } from "@/hooks/useLayoutState";
 
@@ -68,7 +68,7 @@ export function ChatLayout() {
             {showDisconnected && (
               <div className="flex-1 flex items-center justify-center p-4">
                 <div className="w-full max-w-md">
-                  <ChatDisconnectedMessage />
+                  <ChatDisconnectedCard />
                 </div>
               </div>
             )}

src/components/chat/RootLayout.tsx

@@ -7,7 +7,7 @@ import { useAccount } from "wagmi";
 
 import RootChatInput from "@/components/chat/chat-input-root";
 import { ExampleQueries } from "@/components/chat/example-queries";
-import { ChatDisconnectedMessage } from "@/components/shared/DIsconnectedMessage";
+import { ChatDisconnectedCard } from "@/components/shared/DisconnectedCard";
 
 import { useChat } from "@/contexts/chat-context";
 
@@ -47,7 +47,7 @@ export function RootLayout() {
       <div className="h-screen flex w-full absolute inset-0 bg-transparent">
         <div className="flex-1 flex items-center justify-center p-4">
           <div className="w-full max-w-md">
-            <ChatDisconnectedMessage />
+            <ChatDisconnectedCard />
           </div>
         </div>
       </div>

src/components/header/theme-toggle.tsx

@@ -10,7 +10,8 @@ const ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
 
   const toggleTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
   };
 
   return (

src/components/shared/DIsconnectedMessage.tsx → src/components/shared/DisconnectedCard.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { ConnectKitButton } from "connectkit";
 import { RefreshCw, Shield, Sparkles } from "lucide-react";
 
-export function ChatDisconnectedMessage() {
+export function ChatDisconnectedCard() {
   return (
     <div className="flex flex-col items-center justify-center h-full p-6 bg-white dark:bg-neutral-950 backdrop-blur-md rounded-lg border border-primary/30">
       <div className="p-3 bg-primary/20 rounded-full mb-4">
@@ -41,9 +41,9 @@ export function ChatDisconnectedMessage() {
   );
 }
 
-export function DisconnectedMessage() {
+export function DisconnectedCard() {
   return (
-    <div className="flex flex-col items-center justify-center bg-black text-white overflow-hidden">
+    <div className="flex flex-col items-center justify-center bg-white dark:bg-black text-black dark:text-white overflow-hidden">
       <div className="absolute inset-0 z-20">
         {[...Array(30)].map((_, i) => (
           <div
@@ -66,7 +66,7 @@ export function DisconnectedMessage() {
         <div className="flex flex-col items-center max-w-3xl mx-auto">
           <div
             className="text-center space-y-6 sm:space-y-8 md:space-y-10 px-4 sm:px-8 md:px-12 py-8 sm:py-12 md:py-16 rounded-2xl sm:rounded-3xl
-        backdrop-blur-xl bg-neutral-950
+        backdrop-blur-xl bg-white dark:bg-neutral-950
         border border-primary/30 shadow-[0_0_80px_rgba(71,216,163,0.2)]
         relative overflow-hidden z-40"
           >
@@ -109,25 +109,27 @@ export function DisconnectedMessage() {
             </h1>
 
             <div className="space-y-4 sm:space-y-5 md:space-y-7 max-w-xl mx-auto">
-              <p className="text-base sm:text-lg md:text-xl text-gray-100 leading-relaxed relative z-10 font-medium">
+              <p className="text-base sm:text-lg md:text-xl text-gray-700 dark:text-gray-100 leading-relaxed relative z-10 font-medium">
                 Connect your Wallet to access the Terminal. Sign in via
                 Signature to unlock the Matrix.
               </p>
 
               <div className="relative z-10 flex flex-col sm:flex-row items-center justify-center gap-3 py-2">
-                <div className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 bg-black/40 rounded-full backdrop-blur-md border border-gray-800/30 hover:border-primary/20 transition-all duration-300">
+                <div className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100/80 dark:bg-black/40 rounded-full backdrop-blur-md border border-gray-200/50 dark:border-gray-800/30 hover:border-primary/20 transition-all duration-300">
                   <Shield className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-primary" />
-                  <span className="text-xs text-gray-200">
+                  <span className="text-xs text-gray-700 dark:text-gray-200">
                     Secure Connection
                   </span>
                 </div>
-                <div className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 bg-black/40 rounded-full backdrop-blur-md border border-gray-800/30 hover:border-primary/20 transition-all duration-300">
+                <div className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100/80 dark:bg-black/40 rounded-full backdrop-blur-md border border-gray-200/50 dark:border-gray-800/30 hover:border-primary/20 transition-all duration-300">
                   <Sparkles className="w-3 h-3 sm:w-3.5 sm:h-3.5 text-primary" />
-                  <span className="text-xs text-gray-200">Premium Access</span>
+                  <span className="text-xs text-gray-700 dark:text-gray-200">
+                    Premium Access
+                  </span>
                 </div>
               </div>
 
-              <p className="text-xs sm:text-sm text-gray-400 leading-relaxed relative z-10 max-w-md mx-auto">
+              <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400 leading-relaxed relative z-10 max-w-md mx-auto">
                 This signature does not give anyone access to your funds and
                 will not be shared with any third parties. Signing your
                 blockchain address is anonymous and does not compromise your
@@ -152,8 +154,8 @@ export function DisconnectedMessage() {
 
               <Link
                 href="https://enter.thematrix.app/"
-                className="w-full sm:w-auto text-center text-gray-300 hover:text-white border border-gray-700 cursor-pointer
-                hover:bg-black/60 py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center relative z-50"
+                className="w-full sm:w-auto text-center text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white border border-gray-300 dark:border-gray-700 cursor-pointer
+                hover:bg-gray-100/50 dark:hover:bg-black/60 py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center relative z-50"
               >
                 Return to Home
               </Link>

src/components/shared/MatrixCanvas.tsx

@@ -6,10 +6,6 @@ const MatrixCanvas = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    // Enforce dark mode on client-side
-    document.documentElement.classList.add("dark");
-    document.body.classList.add("dark");
-
     const canvas = canvasRef.current;
     if (!canvas) return;
 
@@ -42,14 +38,15 @@ const MatrixCanvas = () => {
     }
 
     const isDarkMode = document.documentElement.classList.contains("dark");
+    console.log("isDarkMode", isDarkMode);
     ctx.fillStyle = isDarkMode ? "rgba(0, 0, 0, 1)" : "rgba(255, 255, 255, 1)";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     // Drawing the characters
     const draw = () => {
       // Black BG for the canvas with opacity to create trail effect
       const isDarkMode = document.documentElement.classList.contains("dark");
-      
+
       // Theme-aware background - dark in dark mode, white in light mode
       if (isDarkMode) {
         ctx.fillStyle = "rgba(0, 0, 0, 0.06)"; // Dark mode: black with opacity

src/components/shared/WalletGuard.tsx

@@ -6,20 +6,20 @@ import { usePathname, useRouter } from "next/navigation";
 
 import { useAccount } from "wagmi";
 
-// Allow root path and chat paths to be accessed without redirecting
+import { useTheme } from "@/contexts/theme-context";
+
 const isPublicPath = (path: string) =>
   path === "/" || path.startsWith("/chat/");
 
 export function WalletGuard({ children }: { children: React.ReactNode }) {
   const { isConnecting, isConnected } = useAccount();
   const router = useRouter();
   const pathname = usePathname();
+  const { setTheme } = useTheme();
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // Wait for wallet state to be fully determined
   useEffect(() => {
     if (!isConnecting && !isInitialized) {
-      // Add a small delay to ensure state is fully rehydrated
       const timer = setTimeout(() => {
         setIsInitialized(true);
       }, 500);
@@ -28,24 +28,26 @@ export function WalletGuard({ children }: { children: React.ReactNode }) {
     }
   }, [isConnecting, isInitialized]);
 
-  // Handle redirects
   useEffect(() => {
     if (
-      isInitialized && // Only after initialization
-      !isConnecting && // Not in the process of connecting
-      !isConnected && // Definitely not connected
-      !isPublicPath(pathname) // Not on a public path
+      isInitialized &&
+      !isConnecting &&
+      !isConnected &&
+      !isPublicPath(pathname)
     ) {
       router.push("/");
     }
-  }, [isConnected, isConnecting, pathname, router, isInitialized]);
 
-  // During initialization, render children
+    if (isConnected) {
+      const savedTheme = localStorage.getItem("theme") || "dark";
+      setTheme(savedTheme === "dark" ? "dark" : "light");
+    }
+  }, [isConnected, isConnecting, pathname, router, isInitialized, setTheme]);
+
   if (!isInitialized || isConnecting) {
     return <>{children}</>;
   }
 
-  // After initialization, block if definitely not connected and not on a public path
   if (!isConnected && !isPublicPath(pathname)) {
     return null;
   }

src/components/shared/Web3Provider.tsx

@@ -5,6 +5,8 @@ import { ConnectKitProvider, getDefaultConfig } from "connectkit";
 import { WagmiProvider, createConfig, http } from "wagmi";
 import { arbitrum, base, mainnet, optimism } from "wagmi/chains";
 
+import { useTheme } from "@/contexts/theme-context";
+
 // Define custom chains that aren't in wagmi directly
 const mode = {
   id: 34443,
@@ -90,23 +92,43 @@ const queryClient = new QueryClient();
 
 // Web3 Provider component
 export const Web3Provider = ({ children }: { children: React.ReactNode }) => {
+  const { theme } = useTheme();
+  const isDarkMode = theme === "dark";
+
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>
         <ConnectKitProvider
-          theme="midnight"
-          mode="dark"
+          theme={isDarkMode ? "midnight" : "auto"}
+          mode={isDarkMode ? "dark" : "light"}
           customTheme={{
+            // Common colors that remain the same in both modes
             "--ck-connectbutton-color": "#000000",
             "--ck-connectbutton-background": "#47D8A3",
             "--ck-connectbutton-hover-background": "#3bb990",
-            "--ck-body-background": "#000000",
-            "--ck-body-color": "#ffffff",
             "--ck-primary-button-background": "#47D8A3",
             "--ck-primary-button-hover-background": "#3bb990",
             "--ck-primary-button-color": "#000000",
-            "--ck-body-color-muted": "#aaaaaa",
-            "--ck-secondary-button-background": "#222222",
+
+            // Theme-specific colors
+            "--ck-body-background": isDarkMode ? "#000000" : "#ffffff",
+            "--ck-body-color": isDarkMode ? "#ffffff" : "#111111",
+            "--ck-body-color-muted": isDarkMode ? "#aaaaaa" : "#666666",
+            "--ck-secondary-button-background": isDarkMode
+              ? "#222222"
+              : "#f0f0f0",
+            "--ck-secondary-button-color": isDarkMode ? "#ffffff" : "#111111",
+            "--ck-overlay-background": isDarkMode
+              ? "rgba(0, 0, 0, 0.8)"
+              : "rgba(0, 0, 0, 0.4)",
+            "--ck-focus-color": "#47D8A3",
+            "--ck-border-color": isDarkMode ? "#333333" : "#e0e0e0",
+
+            // Badge styling for "Recent" tag
+            "--ck-recent-badge-background": isDarkMode ? "#000000" : "#ffffff",
+            "--ck-recent-badge-color": isDarkMode ? "#47D8A3" : "#118860",
+            "--ck-recent-badge-border": "none",
+            "--ck-recent-badge-box-shadow": "none",
           }}
         >
           {children}