MettaChain · codefather2026 · May 26, 2026
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -101,6 +101,7 @@ body {
 }
 
 :root {
+  color-scheme: light;
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -137,6 +138,7 @@ body {
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,9 +34,13 @@ export default async function RootLayout({
   const isRTL = ["ar", "he"].includes(preferredLang);
 
   return (
-    <html lang={preferredLang} dir={isRTL ? "rtl" : "ltr"}>
+    <html
+      lang={preferredLang}
+      dir={isRTL ? "rtl" : "ltr"}
+      suppressHydrationWarning
+    >
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} bg-background font-sans text-foreground antialiased`}
       >
         <ClientProviders>{children}</ClientProviders>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,7 +11,6 @@ import { ErrorCategory, ErrorSeverity } from "@/types/errors";
 import { logger } from "@/utils/logger";
 import { WalletConnector } from "@/components/WalletConnector";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
-import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 import {
   ChainAware,
   ChainSpecific,
@@ -118,7 +117,6 @@ function HomeContent() {
               </h1>
             </div>
             <div className="flex items-center gap-3">
-              <ThemeSwitcher />
               <LanguageSwitcher />
               <WalletConnector />
             </div>

diff --git a/src/app/referral/leaderboard/page.tsx b/src/app/referral/leaderboard/page.tsx
@@ -12,7 +12,7 @@ export const metadata = {
 
 export default function LeaderboardPage() {
   return (
-    <main className="min-h-screen bg-slate-50 py-12">
+    <main className="min-h-screen bg-slate-50 py-12 dark:bg-slate-950">
       <div className="mx-auto max-w-6xl px-4">
         <ReferralLeaderboard limit={50} />
       </div>

diff --git a/src/app/referral/page.tsx b/src/app/referral/page.tsx
@@ -12,7 +12,7 @@ export const metadata = {
 
 export default function ReferralPage() {
   return (
-    <main className="min-h-screen bg-slate-50 py-12">
+    <main className="min-h-screen bg-slate-50 py-12 dark:bg-slate-950">
       <div className="mx-auto max-w-7xl px-4">
         <ReferralDashboard showLeaderboard={true} />
       </div>

diff --git a/src/components/ClientProviders.tsx b/src/components/ClientProviders.tsx
@@ -14,6 +14,8 @@ import dynamic from "next/dynamic";
 import { useOnboardingStore } from "@/store/onboardingStore";
 import { DomainWarningBanner } from "@/components/DomainWarningBanner";
 import { useEffect } from "react";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import { GlobalThemeToggle } from "@/components/GlobalThemeToggle";
 
 interface ClientProvidersProps {
   children: React.ReactNode;
@@ -59,23 +61,26 @@ export function ClientProviders({ children }: ClientProvidersProps) {
   }, [hasCompletedOnboarding, startOnboarding]);
 
   return (
-    <WagmiProvider config={config}>
-      <QueryProvider>
-        <ChainAwareProvider>
-          <LoadingProgressBar />
-          <PerformanceMonitor />
-          <ServiceWorkerRegistration />
-          <OfflineIndicator />
-          <DomainWarningBanner />
-          {children}
-          <TransactionMonitor />
-          <NotificationSystem />
-          <Toaster />
-          <FloatingComparisonBar />
-          <MobileBottomNavigation />
-          <OnboardingTour />
-        </ChainAwareProvider>
-      </QueryProvider>
-    </WagmiProvider>
+    <ThemeProvider>
+      <WagmiProvider config={config}>
+        <QueryProvider>
+          <ChainAwareProvider>
+            <LoadingProgressBar />
+            <PerformanceMonitor />
+            <ServiceWorkerRegistration />
+            <OfflineIndicator />
+            <DomainWarningBanner />
+            {children}
+            <GlobalThemeToggle />
+            <TransactionMonitor />
+            <NotificationSystem />
+            <Toaster />
+            <FloatingComparisonBar />
+            <MobileBottomNavigation />
+            <OnboardingTour />
+          </ChainAwareProvider>
+        </QueryProvider>
+      </WagmiProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/components/GlobalThemeToggle.tsx b/src/components/GlobalThemeToggle.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { ThemeSwitcher } from "@/components/ThemeSwitcher";
+
+export function GlobalThemeToggle() {
+  return (
+    <div className="fixed right-4 bottom-20 z-40 md:right-6 md:bottom-6">
+      <ThemeSwitcher
+        size="icon"
+        className="h-11 w-11 rounded-full border-border/70 bg-background/90 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80"
+      />
+    </div>
+  );
+}
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      storageKey="theme"
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -1,57 +1,51 @@
 "use client";
 
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
-export function ThemeSwitcher() {
-  const [isDark, setIsDark] = useState(false);
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ThemeSwitcherProps {
+  className?: string;
+  size?: "sm" | "default" | "icon";
+}
+
+export function ThemeSwitcher({
+  className,
+  size = "sm",
+}: ThemeSwitcherProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const { resolvedTheme, setTheme } = useTheme();
 
   useEffect(() => {
     setIsMounted(true);
-    const saved = localStorage.getItem('theme');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const isDarkMode = saved === 'dark' || (saved === null && prefersDark);
-
-    setIsDark(isDarkMode);
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
   }, []);
 
   const toggleTheme = () => {
-    const newIsDark = !isDark;
-    setIsDark(newIsDark);
-
-    if (newIsDark) {
-      document.documentElement.classList.add('dark');
-      localStorage.setItem('theme', 'dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-      localStorage.setItem('theme', 'light');
-    }
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
 
   if (!isMounted) {
-    return <div className="w-10 h-10" />;
+    const placeholderSize = size === "icon" ? "h-11 w-11" : "h-8 w-20";
+    return <div className={cn("shrink-0", placeholderSize, className)} />;
   }
 
+  const isDark = resolvedTheme === "dark";
+
   return (
     <Button
       variant="outline"
-      size="sm"
+      size={size}
       onClick={toggleTheme}
-      className="gap-2"
+      className={cn("gap-2", className)}
       data-testid="theme-switcher"
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
     >
-      {isDark ? (
-        <Sun className="h-4 w-4" />
-      ) : (
-        <Moon className="h-4 w-4" />
-      )}
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {size !== "icon" && <span>{isDark ? "Light" : "Dark"}</span>}
     </Button>
   );
 }