fix: simplify theme switching to use direct DOM manipulation and localStorage

src/components/ClientLayout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import { ThemeProvider } from 'next-themes';
 import { AuthProvider } from '@/context/AuthContext';
 import { Toaster } from 'react-hot-toast';
@@ -9,8 +10,32 @@ export default function ClientLayout({
 }: {
   children: React.ReactNode;
 }) {
+  useEffect(() => {
+    // Initialize theme from localStorage on mount
+    const stored = localStorage.getItem('theme-mode');
+    const html = document.documentElement;
+    
+    if (stored === 'light') {
+      html.classList.remove('dark');
+      html.style.colorScheme = 'light';
+    } else if (stored === 'system') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        html.classList.add('dark');
+        html.style.colorScheme = 'dark';
+      } else {
+        html.classList.remove('dark');
+        html.style.colorScheme = 'light';
+      }
+    } else {
+      // Default to dark
+      html.classList.add('dark');
+      html.style.colorScheme = 'dark';
+    }
+  }, []);
+
   return (
-    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem storageKey="theme">
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <AuthProvider>
         {children}
         <Toaster

src/components/SettingsPage.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '@/context/AuthContext';
-import { useTheme } from 'next-themes';
 
 interface SettingsPageProps {
   userEmail?: string;
@@ -10,33 +9,42 @@ interface SettingsPageProps {
 
 export default function SettingsPage({ userEmail }: SettingsPageProps) {
   const { logout } = useAuth();
-  const { theme, setTheme } = useTheme();
   const [showConfirm, setShowConfirm] = useState(false);
-  const [mounted, setMounted] = useState(false);
   const [currentTheme, setCurrentTheme] = useState<string>('dark');
 
   useEffect(() => {
-    setMounted(true);
+    // Get the current theme from localStorage or HTML class
-    // Get the current theme from localStorage or system preference
+    const stored = localStorage.getItem('theme-mode');
-    const stored = localStorage.getItem('theme');
     if (stored) {
       setCurrentTheme(stored);
-    } else if (theme) {
+    } else {
-      setCurrentTheme(theme);
+      const isDark = document.documentElement.classList.contains('dark');
+      setCurrentTheme(isDark ? 'dark' : 'light');
     }
-  }, [theme]);
+  }, []);
 
   const handleThemeChange = (newTheme: string) => {
     setCurrentTheme(newTheme);
-    localStorage.setItem('theme', newTheme);
+    localStorage.setItem('theme-mode', newTheme);
-    setTheme(newTheme);
     
-    // Update the HTML element immediately
     const html = document.documentElement;
-    if (newTheme === 'dark' || (newTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    
+    if (newTheme === 'dark') {
       html.classList.add('dark');
-    } else {
+      document.documentElement.style.colorScheme = 'dark';
+    } else if (newTheme === 'light') {
       html.classList.remove('dark');
+      document.documentElement.style.colorScheme = 'light';
+    } else if (newTheme === 'system') {
+      // Use system preference
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        html.classList.add('dark');
+        document.documentElement.style.colorScheme = 'dark';
+      } else {
+        html.classList.remove('dark');
+        document.documentElement.style.colorScheme = 'light';
+      }
     }
   };