first final draft

frontend/src/components/Login.jsx

@@ -32,8 +32,9 @@ const Login = () => {
 
   return (
     <div className="auth-container">
-      <ThemeToggler />
+
       <form className="auth-form" onSubmit={handleSubmit(submitHandler)}>
+        <ThemeToggler className="theme-toggle-button" />
         <div className="auth-header">
           <div className="auth-logo">
           <svg className="logo-icon-svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M12.48 3.52a1 1 0 0 0-1 1v2.92a1 1 0 0 0 .52.88l5.44 3.14a1 1 0 0 0 1.5-.87V7.52a1 1 0 0 0-.52-.88l-5.44-3.14a1 1 0 0 0-.5 0zM5.08 7.52a1 1 0 0 0-.52.88v2.92a1 1 0 0 0 .52.88l5.44 3.14a1 1 0 0 0 1.5-.87V11.4a1 1 0 0 0-.52-.88L6.58 7.52a1 1 0 0 0-1.5 0zM12 14.5l-5.44 3.14a1 1 0 0 0-.52.88v2.92a1 1 0 0 0 1.5.87l5.44-3.14a1 1 0 0 0 .52-.88v-2.92a1 1 0 0 0-1.5-.87z" /> </svg>

frontend/src/components/Register.jsx

@@ -37,8 +37,8 @@ const Register = () => {
 
   return (
     <div className="auth-container">
-      <ThemeToggler />
       <form className="auth-form" onSubmit={handleSubmit(submitHandler)}>
+        <ThemeToggler className="theme-toggle-button" />
         <div className="auth-header">
           <div className="auth-logo">
           <svg className="logo-icon-svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M12.48 3.52a1 1 0 0 0-1 1v2.92a1 1 0 0 0 .52.88l5.44 3.14a1 1 0 0 0 1.5-.87V7.52a1 1 0 0 0-.52-.88l-5.44-3.14a1 1 0 0 0-.5 0zM5.08 7.52a1 1 0 0 0-.52.88v2.92a1 1 0 0 0 .52.88l5.44 3.14a1 1 0 0 0 1.5-.87V11.4a1 1 0 0 0-.52-.88L6.58 7.52a1 1 0 0 0-1.5 0zM12 14.5l-5.44 3.14a1 1 0 0 0-.52.88v2.92a1 1 0 0 0 1.5.87l5.44-3.14a1 1 0 0 0 .52-.88v-2.92a1 1 0 0 0-1.5-.87z" /> </svg>

frontend/src/components/ThemeToggler.jsx

@@ -1,19 +1,56 @@
 import React, { useState, useEffect } from 'react';
 
 const ThemeToggler = () => {
-  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      return savedTheme;
+    }
+    // Check system preference if no saved theme
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  });
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
   }, [theme]);
 
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e) => {
+      if (!localStorage.getItem('theme')) {
+        setTheme(e.matches ? 'dark' : 'light');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
   const toggleTheme = () => {
     setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
   };
 
+  const handleKeyDown = (e) => {
+    // Prevent Enter key from triggering theme toggle when inside a form
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
   return (
-    <button onClick={toggleTheme} className="theme-toggle-button" aria-label="Toggle theme">
+    <button 
+      onClick={toggleTheme} 
+      onKeyDown={handleKeyDown}
+      className="theme-toggle-button" 
+      aria-label="Toggle theme"
+      type="button"
+    >
       <div className="theme-toggle-icon-container">
         <svg className={`theme-icon sun-icon ${theme === 'light' ? 'active' : ''}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <circle cx="12" cy="12" r="5"></circle>

frontend/src/index.css

@@ -2,4 +2,14 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+#root {
+  height: 100%;
+  overflow: hidden;
 }

frontend/src/main.jsx

@@ -1,6 +1,7 @@
 
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './styles/theme.css'
 import App from './App.jsx'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'

frontend/src/routes/MainRoutes.jsx

@@ -19,8 +19,8 @@ const MainRoutes = () => {
 
         <Route path="/login" element={isAuthenticated ? <Navigate to="/" replace /> : <Login />} />
         <Route path="/register" element={isAuthenticated ? <Navigate to="/" replace /> : <Register />} />
-        <Route path="/" element={<AuthRoute><ChatInterface /></AuthRoute>} />
-        <Route path="/home" element={<AuthRoute><ChatInterface /></AuthRoute>} />
+        <Route path="/" element={<ChatInterface />} />
+        <Route path="/home" element={<ChatInterface />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </Suspense>