Complete comprehensive repository overhaul with theme toggle

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>

Author: Copilot

src/components/ui/theme-toggle.tsx

@@ -6,7 +6,21 @@ import { Button } from '@/components/ui/button'
 import { useTheme } from '@/hooks/use-theme'
 
 export function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme()
+  const { theme, toggleTheme, mounted } = useTheme()
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        aria-label="Toggle theme"
+        className="h-9 w-9 px-0"
+        disabled
+      >
+        <SunIcon className="h-4 w-4" />
+      </Button>
+    )
+  }
 
   return (
     <Button

src/hooks/use-theme.ts

@@ -6,8 +6,11 @@ export type Theme = 'light' | 'dark'
 
 export function useTheme() {
   const [theme, setTheme] = useState<Theme>('light')
+  const [mounted, setMounted] = useState(false)
 
   useEffect(() => {
+    setMounted(true)
+    
     // Check for stored theme preference or default to system preference
     const stored = localStorage.getItem('theme') as Theme | null
     if (stored) {
@@ -23,13 +26,17 @@ export function useTheme() {
   }, [])
 
   const toggleTheme = () => {
+    if (!mounted) return
+    
     const newTheme: Theme = theme === 'light' ? 'dark' : 'light'
     setTheme(newTheme)
     localStorage.setItem('theme', newTheme)
     document.documentElement.classList.toggle('dark', newTheme === 'dark')
   }
 
   const setThemeValue = (newTheme: Theme) => {
+    if (!mounted) return
+    
     setTheme(newTheme)
     localStorage.setItem('theme', newTheme)
     document.documentElement.classList.toggle('dark', newTheme === 'dark')
@@ -39,5 +46,6 @@ export function useTheme() {
     theme,
     toggleTheme,
     setTheme: setThemeValue,
+    mounted,
   }
 }