fix: add theme initialization script in head and toast feedback for theme changes

src/app/layout.tsx

@@ -30,6 +30,33 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning={true}>
+      <head>
+        <script dangerouslySetInnerHTML={{
+          __html: `
+            (function() {
+              const theme = localStorage.getItem('theme-mode') || 'dark';
+              const html = document.documentElement;
+              
+              if (theme === 'light') {
+                html.classList.remove('dark');
+                html.style.colorScheme = 'light';
+              } else if (theme === '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 {
+                html.classList.add('dark');
+                html.style.colorScheme = 'dark';
+              }
+            })();
+          `
+        }} />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

src/components/SettingsPage.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '@/context/AuthContext';
+import toast from 'react-hot-toast';
 
 interface SettingsPageProps {
   userEmail?: string;
@@ -24,6 +25,9 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
   }, []);
 
   const handleThemeChange = (newTheme: string) => {
+    console.log('Changing theme to:', newTheme);
+    toast.success(`Theme changed to ${newTheme}`);
+    
     setCurrentTheme(newTheme);
     localStorage.setItem('theme-mode', newTheme);
     
@@ -31,19 +35,18 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
     
     if (newTheme === 'dark') {
       html.classList.add('dark');
-      document.documentElement.style.colorScheme = 'dark';
+      html.style.colorScheme = 'dark';
     } else if (newTheme === 'light') {
       html.classList.remove('dark');
-      document.documentElement.style.colorScheme = 'light';
+      html.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';
+        html.style.colorScheme = 'dark';
       } else {
         html.classList.remove('dark');
-        document.documentElement.style.colorScheme = 'light';
+        html.style.colorScheme = 'light';
       }
     }
   };