TokenizeRWATemplate

projects/TokenizeRWATemplate-frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+
+const THEME_KEY = 'tokenize_theme'
+type Theme = 'light' | 'dark'
+
+function getInitialTheme(): Theme {
+  const saved = localStorage.getItem(THEME_KEY)
+  if (saved === 'light' || saved === 'dark') return saved
+  const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+  return prefersDark ? 'dark' : 'light'
+}
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>(() => getInitialTheme())
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    // Apply theme immediately on mount to prevent flash
+    const t = getInitialTheme()
+    if (t === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+    // Apply Tailwind dark mode
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+    localStorage.setItem(THEME_KEY, theme)
+  }, [theme, mounted])
+
+  return (
+    <button
+      type="button"
+      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition"
+      onClick={() => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))}
+      title="Toggle light/dark mode"
+    >
+      {theme === 'dark' ? '🌙' : '☀️'}
+    </button>
+  )
+}