GalactiGuild · gabito1451 · Mar 28, 2026 · Mar 28, 2026
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
     "lucide-react": "^0.453.0",
     "next": "15.0.3",
     "next-intl": "^4.8.3",
+    "next-themes": "^0.4.6",
     "react": "^18",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^18",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
     title: "Stellar Guilds",
@@ -11,8 +12,18 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <html lang="en">
-            <body>{children}</body>
+        <html lang="en" suppressHydrationWarning>
+            <body>
+                {/* next-themes persists preference to localStorage under key "theme" by default */}
+                <ThemeProvider
+                    attribute="class"
+                    defaultTheme="system"
+                    enableSystem
+                    disableTransitionOnChange
+                >
+                    {children}
+                </ThemeProvider>
+            </body>
         </html>
     );
 }
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -53,6 +53,5 @@ export { useSecurity } from '@/hooks/useSecurity'
 
 // Stores
 export { useSidebarStore } from '@/store/sidebarStore'
-export { useThemeStore } from '@/store/themeStore'
 export { useWalletStore } from '@/store/walletStore'
 export { useSecurityStore } from '@/store/securityStore'
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
@@ -7,6 +7,7 @@ import { useSidebarStore } from '@/store/sidebarStore'
 import { cn } from '@/lib/utils'
 import { WalletConnectButton } from '@/components/WalletConnector/WalletConnectButton'
 import { WalletModal } from '@/components/WalletConnector/WalletModal'
+import { ThemeToggle } from '@/components/ui/ThemeToggle'
 
 interface HeaderProps {
   className?: string
@@ -44,6 +45,7 @@ const Header = ({ className }: HeaderProps) => {
           </nav>
 
           <div className="ml-4 flex items-center space-x-3">
+            <ThemeToggle />
             <button className="p-2 rounded-full hover:bg-stellar-lightNavy transition-colors">
               <Vote size={20} className="text-stellar-slate" />
             </button>

diff --git a/frontend/src/components/ui/ThemeToggle.tsx b/frontend/src/components/ui/ThemeToggle.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import { Sun, Moon, Monitor } from 'lucide-react'
+
+type Theme = 'light' | 'dark' | 'system'
+
+const THEME_CYCLE: Theme[] = ['light', 'dark', 'system']
+
+const icons: Record<Theme, React.ReactNode> = {
+  light: <Sun size={18} />,
+  dark: <Moon size={18} />,
+  system: <Monitor size={18} />,
+}
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => setMounted(true), [])
+
+  // Render neutral placeholder until hydrated to avoid mismatch
+  if (!mounted) return <div className="w-9 h-9" />
+
+  const current = (theme as Theme) ?? 'system'
+  const next = THEME_CYCLE[(THEME_CYCLE.indexOf(current) + 1) % THEME_CYCLE.length]
+
+  return (
+    <button
+      onClick={() => setTheme(next)}
+      aria-label={`Current theme: ${current}. Switch to ${next}`}
+      className="p-2 rounded-md hover:bg-stellar-lightNavy transition-colors"
+    >
+      {icons[current]}
+    </button>
+  )
+}
diff --git a/frontend/src/store/themeStore.ts b/frontend/src/store/themeStore.ts
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from "tailwindcss";
 import typography from "@tailwindcss/typography";
 
 const config: Config = {
+  darkMode: 'class',
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",