From da131d0f2fa1f6c6378ebbc6e98fb344d80d481c Mon Sep 17 00:00:00 2001
From: Monu123a <monuahlawatxyx@gmail.com>
Date: Mon, 1 Dec 2025 23:43:18 +0530
Subject: [PATCH 1/2] feat: Theme Switcher & UI Improvements (Fixes #24, #26)

---
 Frontend/src/App.jsx                 | 15 +++---
 Frontend/src/components/Layout.jsx   | 70 ++++++++++++++++----------
 Frontend/src/components/ui/index.jsx | 28 +++++------
 Frontend/src/index.css               | 14 +++---
 Frontend/src/pages/Settings.jsx      | 75 ++++++++++++++--------------
 Frontend/src/store/useStore.js       |  9 +++-
 6 files changed, 118 insertions(+), 93 deletions(-)

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 0706fb2..4e17baa 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -19,20 +19,21 @@ function ProtectedRoute({ children }) {
 }
 
 function App() {
-  const { theme } = useStore();
+  const { theme, setTheme } = useStore();
 
   useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove('light', 'dark');
 
-    if (theme === 'system' || theme === 'auto') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      root.classList.add(systemTheme);
-      return;
+    let effectiveTheme = theme;
+    if (theme !== 'light' && theme !== 'dark') {
+      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      // Normalise the stored theme so future toggles are predictable
+      setTheme(effectiveTheme);
     }
 
-    root.classList.add(theme);
-  }, [theme]);
+    root.classList.add(effectiveTheme);
+  }, [theme, setTheme]);
 
   return (
     <Router>
diff --git a/Frontend/src/components/Layout.jsx b/Frontend/src/components/Layout.jsx
index 59cd031..4d237a2 100644
--- a/Frontend/src/components/Layout.jsx
+++ b/Frontend/src/components/Layout.jsx
@@ -10,11 +10,13 @@ import {
   Menu,
   X,
   Bell,
-  ChevronDown
+  ChevronDown,
+  Sun,
+  Moon
 } from 'lucide-react';
 
 export default function Layout({ children }) {
-  const { user, logout, notifications, unreadCount } = useStore();
+  const { user, logout, notifications, unreadCount, theme, setTheme } = useStore();
   const navigate = useNavigate();
   const location = useLocation();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -25,6 +27,11 @@ export default function Layout({ children }) {
     navigate('/login');
   };
 
+  const toggleTheme = () => {
+    // Simple, predictable toggle between light and dark
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
   const navItems = [
     { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
     { icon: Users, label: 'My Groups', path: '/groups' },
@@ -33,15 +40,15 @@ export default function Layout({ children }) {
   ];
 
   return (
-    <div className="min-h-screen bg-gray-50 flex">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
       {/* Sidebar (Desktop) */}
-      <aside className="hidden md:flex flex-col w-64 bg-white border-r border-gray-100 fixed h-full z-30">
-        <div className="p-6 border-b border-gray-50">
+      <aside className="hidden md:flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-100 dark:border-gray-700 fixed h-full z-30">
+        <div className="p-6 border-b border-gray-50 dark:border-gray-700">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-indigo-200">
+            <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-indigo-200 dark:shadow-indigo-900/50">
               E
             </div>
-            <span className="font-bold text-xl text-gray-900">Expense Splitter</span>
+            <span className="font-bold text-xl text-gray-900 dark:text-gray-100">Expense Splitter</span>
           </div>
         </div>
 
@@ -53,8 +60,8 @@ export default function Layout({ children }) {
               className={({ isActive }) => cn(
                 "flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 font-medium",
                 isActive
-                  ? "bg-primary-light/50 text-primary"
-                  : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                  ? "bg-primary-light/50 dark:bg-primary/20 text-primary dark:text-primary-light"
+                  : "text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
               )}
             >
               <item.icon size={20} />
@@ -63,10 +70,10 @@ export default function Layout({ children }) {
           ))}
         </nav>
 
-        <div className="p-4 border-t border-gray-50">
+        <div className="p-4 border-t border-gray-50 dark:border-gray-700">
           <button
             onClick={handleLogout}
-            className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 hover:bg-red-50 transition-all duration-200 font-medium"
+            className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all duration-200 font-medium"
           >
             <LogOut size={20} />
             Logout
@@ -84,13 +91,13 @@ export default function Layout({ children }) {
 
       {/* Mobile Sidebar */}
       <aside className={cn(
-        "fixed inset-y-0 left-0 w-64 bg-white z-50 transform transition-transform duration-300 ease-in-out md:hidden",
+        "fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 z-50 transform transition-transform duration-300 ease-in-out md:hidden",
         isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
       )}>
-        <div className="p-6 flex justify-between items-center border-b border-gray-50">
-          <span className="font-bold text-xl text-gray-900">Menu</span>
+        <div className="p-6 flex justify-between items-center border-b border-gray-50 dark:border-gray-700">
+          <span className="font-bold text-xl text-gray-900 dark:text-gray-100">Menu</span>
           <button onClick={() => setIsMobileMenuOpen(false)}>
-            <X size={24} className="text-gray-500" />
+            <X size={24} className="text-gray-500 dark:text-gray-400" />
           </button>
         </div>
         <nav className="p-4 space-y-2">
@@ -102,8 +109,8 @@ export default function Layout({ children }) {
               className={({ isActive }) => cn(
                 "flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 font-medium",
                 isActive
-                  ? "bg-primary-light/50 text-primary"
-                  : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+                  ? "bg-primary-light/50 dark:bg-primary/20 text-primary dark:text-primary-light"
+                  : "text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
               )}
             >
               <item.icon size={20} />
@@ -112,7 +119,7 @@ export default function Layout({ children }) {
           ))}
           <button
             onClick={handleLogout}
-            className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 hover:bg-red-50 transition-all duration-200 font-medium mt-4"
+            className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all duration-200 font-medium mt-4"
           >
             <LogOut size={20} />
             Logout
@@ -123,26 +130,35 @@ export default function Layout({ children }) {
       {/* Main Content */}
       <main className="flex-1 md:ml-64 min-h-screen flex flex-col">
         {/* Top Navbar */}
-        <header className="bg-white/80 backdrop-blur-md sticky top-0 z-20 border-b border-gray-100 px-6 py-4 flex justify-between items-center">
+        <header className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-md sticky top-0 z-20 border-b border-gray-100 dark:border-gray-700 px-6 py-4 flex justify-between items-center">
           <div className="flex items-center gap-4">
             <button
               onClick={() => setIsMobileMenuOpen(true)}
-              className="md:hidden p-2 text-gray-500 hover:bg-gray-50 rounded-lg"
+              className="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg"
             >
               <Menu size={24} />
             </button>
-            <h2 className="text-xl font-bold text-gray-800 hidden sm:block">
+            <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100 hidden sm:block">
               {navItems.find(i => i.path === location.pathname)?.label || 'Dashboard'}
             </h2>
           </div>
 
           <div className="flex items-center gap-6">
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleTheme}
+              className="p-2 text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-colors rounded-full hover:bg-indigo-50 dark:hover:bg-gray-700"
+              title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+            >
+              {theme === 'dark' ? <Sun size={24} /> : <Moon size={24} />}
+            </button>
+
             {/* Notifications */}
             <div className="relative">
-              <button className="p-2 text-gray-400 hover:text-primary transition-colors rounded-full hover:bg-indigo-50 relative">
+              <button className="p-2 text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-colors rounded-full hover:bg-indigo-50 dark:hover:bg-gray-700 relative">
                 <Bell size={24} />
                 {unreadCount > 0 && (
-                  <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
+                  <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 dark:bg-red-400 rounded-full border-2 border-white dark:border-gray-800" />
                 )}
               </button>
             </div>
@@ -151,15 +167,15 @@ export default function Layout({ children }) {
             <div className="relative">
               <button
                 onClick={() => setIsProfileOpen(!isProfileOpen)}
-                className="flex items-center gap-3 hover:bg-gray-50 p-2 rounded-xl transition-colors"
+                className="flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded-xl transition-colors"
               >
-                <div className="w-10 h-10 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center text-primary font-bold">
+                <div className="w-10 h-10 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 rounded-full flex items-center justify-center text-primary dark:text-primary-light font-bold">
                   {user?.name?.charAt(0).toUpperCase()}
                 </div>
                 <div className="hidden md:block text-left">
-                  <p className="text-sm font-semibold text-gray-900">{user?.name}</p>
+                  <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{user?.name}</p>
                 </div>
-                <ChevronDown size={16} className="text-gray-400 hidden md:block" />
+                <ChevronDown size={16} className="text-gray-400 dark:text-gray-500 hidden md:block" />
               </button>
             </div>
           </div>
diff --git a/Frontend/src/components/ui/index.jsx b/Frontend/src/components/ui/index.jsx
index 465d612..690e712 100644
--- a/Frontend/src/components/ui/index.jsx
+++ b/Frontend/src/components/ui/index.jsx
@@ -7,17 +7,17 @@ export function cn(...inputs) {
 }
 
 export const Card = ({ className, children, ...props }) => (
-  <div className={cn("bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all duration-200", className)} {...props}>
+  <div className={cn("bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-200", className)} {...props}>
     {children}
   </div>
 );
 
 export const Button = ({ className, variant = 'primary', size = 'md', ...props }) => {
   const variants = {
-    primary: "bg-primary text-white shadow-lg shadow-indigo-200 hover:bg-primary-hover hover:shadow-indigo-300",
-    secondary: "bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:border-gray-300",
-    danger: "bg-red-50 text-red-600 hover:bg-red-100",
-    ghost: "text-gray-500 hover:text-gray-900 hover:bg-gray-50",
+    primary: "bg-primary text-white shadow-lg shadow-indigo-200 dark:shadow-indigo-900/50 hover:bg-primary-hover hover:shadow-indigo-300 dark:hover:shadow-indigo-900/70",
+    secondary: "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600",
+    danger: "bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50",
+    ghost: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700",
   };
   
   const sizes = {
@@ -41,26 +41,26 @@ export const Button = ({ className, variant = 'primary', size = 'md', ...props }
 
 export const Input = ({ className, label, error, ...props }) => (
   <div className="w-full">
-    {label && <label className="block text-sm font-medium text-gray-700 mb-1.5">{label}</label>}
+    {label && <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{label}</label>}
     <input 
       className={cn(
-        "w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-primary focus:ring-4 focus:ring-primary-light/20 outline-none transition-all duration-200",
-        error && "border-red-500 focus:border-red-500 focus:ring-red-100",
+        "w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:bg-white dark:focus:bg-gray-700 focus:border-primary focus:ring-4 focus:ring-primary-light/20 dark:focus:ring-primary/30 outline-none transition-all duration-200",
+        error && "border-red-500 dark:border-red-400 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-100 dark:focus:ring-red-900/30",
         className
       )}
       {...props}
     />
-    {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+    {error && <p className="mt-1 text-xs text-red-500 dark:text-red-400">{error}</p>}
   </div>
 );
 
 export const Badge = ({ children, variant = 'default', className }) => {
   const variants = {
-    default: "bg-gray-100 text-gray-700",
-    success: "bg-green-100 text-green-700",
-    warning: "bg-yellow-100 text-yellow-700",
-    danger: "bg-red-100 text-red-700",
-    primary: "bg-indigo-100 text-indigo-700",
+    default: "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300",
+    success: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+    warning: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+    danger: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400",
+    primary: "bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400",
   };
 
   return (
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index f1e7d06..2d5c42f 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -6,7 +6,7 @@
 
 @layer base {
   body {
-    @apply bg-gray-50 text-gray-900 font-sans antialiased;
+    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans antialiased;
   }
 }
 
@@ -20,23 +20,23 @@
   }
   
   .btn-secondary {
-    @apply bg-white text-gray-700 border border-gray-200 hover:bg-gray-50 hover:border-gray-300;
+    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600;
   }
   
   .btn-danger {
-    @apply bg-red-50 text-red-600 hover:bg-red-100;
+    @apply bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50;
   }
 
   .card {
-    @apply bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-200;
+    @apply bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow duration-200;
   }
 
   .input {
-    @apply w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-primary focus:ring-4 focus:ring-primary-light/20 outline-none transition-all duration-200;
+    @apply w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:bg-white dark:focus:bg-gray-700 focus:border-primary focus:ring-4 focus:ring-primary-light/20 dark:focus:ring-primary/30 outline-none transition-all duration-200;
   }
 
   .label {
-    @apply block text-sm font-medium text-gray-700 mb-1.5;
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
   }
 }
 
@@ -49,5 +49,5 @@
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 rounded-full hover:bg-gray-400;
+  @apply bg-gray-300 dark:bg-gray-600 rounded-full hover:bg-gray-400 dark:hover:bg-gray-500;
 }
\ No newline at end of file
diff --git a/Frontend/src/pages/Settings.jsx b/Frontend/src/pages/Settings.jsx
index 69c9bbf..d68e8d8 100644
--- a/Frontend/src/pages/Settings.jsx
+++ b/Frontend/src/pages/Settings.jsx
@@ -133,18 +133,18 @@ export default function Settings() {
     return (
         <div className="space-y-6">
             <div>
-                <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
-                <p className="text-gray-500">Manage your account settings and preferences</p>
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
+                <p className="text-gray-500 dark:text-gray-400">Manage your account settings and preferences</p>
             </div>
 
             {success && (
-                <div className="p-3 bg-green-50 text-green-600 rounded-lg text-sm">
+                <div className="p-3 bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-lg text-sm">
                     {success}
                 </div>
             )}
 
             {error && (
-                <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+                <div className="p-3 bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-lg text-sm">
                     {error}
                 </div>
             )}
@@ -159,7 +159,7 @@ export default function Settings() {
                                 onClick={() => setActiveTab(tab.id)}
                                 className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${activeTab === tab.id
                                     ? 'bg-primary text-white'
-                                    : 'text-gray-600 hover:bg-gray-50'
+                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'
                                     }`}
                             >
                                 <tab.icon size={20} />
@@ -175,8 +175,8 @@ export default function Settings() {
                         {activeTab === 'profile' && (
                             <div className="space-y-6">
                                 <div>
-                                    <h2 className="text-xl font-bold text-gray-900 mb-2">Core Profile</h2>
-                                    <p className="text-gray-500 text-sm">Update your personal information</p>
+                                    <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Core Profile</h2>
+                                    <p className="text-gray-500 dark:text-gray-400 text-sm">Update your personal information</p>
                                 </div>
 
                                 <form onSubmit={handleProfileUpdate} className="space-y-4">
@@ -211,8 +211,8 @@ export default function Settings() {
                         {activeTab === 'security' && (
                             <div className="space-y-6">
                                 <div>
-                                    <h2 className="text-xl font-bold text-gray-900 mb-2">Account & Security</h2>
-                                    <p className="text-gray-500 text-sm">Manage your password and security settings</p>
+                                    <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Account & Security</h2>
+                                    <p className="text-gray-500 dark:text-gray-400 text-sm">Manage your password and security settings</p>
                                 </div>
 
                                 <form onSubmit={handlePasswordUpdate} className="space-y-4">
@@ -248,15 +248,15 @@ export default function Settings() {
                         {activeTab === 'notifications' && (
                             <div className="space-y-6">
                                 <div>
-                                    <h2 className="text-xl font-bold text-gray-900 mb-2">Notification Settings</h2>
-                                    <p className="text-gray-500 text-sm">Control how you receive notifications</p>
+                                    <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Notification Settings</h2>
+                                    <p className="text-gray-500 dark:text-gray-400 text-sm">Control how you receive notifications</p>
                                 </div>
 
                                 <div className="space-y-4">
-                                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                                    <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                         <div>
-                                            <h3 className="font-medium text-gray-900">Push Notifications</h3>
-                                            <p className="text-sm text-gray-500">Receive push notifications for updates</p>
+                                            <h3 className="font-medium text-gray-900 dark:text-gray-100">Push Notifications</h3>
+                                            <p className="text-sm text-gray-500 dark:text-gray-400">Receive push notifications for updates</p>
                                         </div>
                                         <label className="relative inline-flex items-center cursor-pointer">
                                             <input
@@ -269,10 +269,10 @@ export default function Settings() {
                                         </label>
                                     </div>
 
-                                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                                    <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                         <div>
-                                            <h3 className="font-medium text-gray-900">Email Notifications</h3>
-                                            <p className="text-sm text-gray-500">Receive email updates and summaries</p>
+                                            <h3 className="font-medium text-gray-900 dark:text-gray-100">Email Notifications</h3>
+                                            <p className="text-sm text-gray-500 dark:text-gray-400">Receive email updates and summaries</p>
                                         </div>
                                         <label className="relative inline-flex items-center cursor-pointer">
                                             <input
@@ -292,21 +292,22 @@ export default function Settings() {
                             <div className="space-y-8">
                                 {/* Theme */}
                                 <div>
-                                    <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
+                                    <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                                         <Palette size={20} />
                                         Theme
                                     </h3>
-                                    <div className="grid grid-cols-3 gap-3">
-                                        {['light', 'dark', 'auto'].map(themeOption => (
+                                    <div className="grid grid-cols-2 gap-3">
+                                        {['light', 'dark'].map(themeOption => (
                                             <button
                                                 key={themeOption}
                                                 onClick={() => handleSettingsUpdate({ theme: themeOption })}
-                                                className={`p-4 rounded-lg border-2 transition-all capitalize ${theme === themeOption
-                                                    ? 'border-primary bg-primary/10'
-                                                    : 'border-gray-200 hover:border-gray-300'
-                                                    }`}
+                                                className={`p-4 rounded-lg border-2 transition-all capitalize ${
+                                                    theme === themeOption
+                                                        ? 'border-primary bg-primary/10 dark:bg-primary/20'
+                                                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                                                }`}
                                             >
-                                                {theme}
+                                                {themeOption}
                                             </button>
                                         ))}
                                     </div>
@@ -314,17 +315,17 @@ export default function Settings() {
 
                                 {/* Language & Region */}
                                 <div>
-                                    <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
+                                    <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                                         <Globe size={20} />
                                         Language & Region
                                     </h3>
                                     <div className="grid grid-cols-2 gap-4">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">Language</label>
+                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Language</label>
                                             <select
                                                 value={settings.language}
                                                 onChange={(e) => handleSettingsUpdate({ language: e.target.value })}
-                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-primary outline-none"
+                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary outline-none"
                                             >
                                                 <option value="en">English</option>
                                                 <option value="es">Spanish</option>
@@ -332,11 +333,11 @@ export default function Settings() {
                                             </select>
                                         </div>
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">Currency</label>
+                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Currency</label>
                                             <select
                                                 value={settings.currency}
                                                 onChange={(e) => handleSettingsUpdate({ currency: e.target.value })}
-                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-primary outline-none"
+                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary outline-none"
                                             >
                                                 <option value="USD">USD ($)</option>
                                                 <option value="EUR">EUR (€)</option>
@@ -349,17 +350,17 @@ export default function Settings() {
 
                                 {/* Expense Defaults */}
                                 <div>
-                                    <h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
+                                    <h3 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
                                         <CreditCard size={20} />
                                         Expense Defaults
                                     </h3>
                                     <div className="space-y-4">
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">Default Split Mode</label>
+                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Default Split Mode</label>
                                             <select
                                                 value={settings.default_split_mode}
                                                 onChange={(e) => handleSettingsUpdate({ default_split_mode: e.target.value })}
-                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-primary outline-none"
+                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary outline-none"
                                             >
                                                 <option value="equal">Equal</option>
                                                 <option value="percentage">Percentage</option>
@@ -368,25 +369,25 @@ export default function Settings() {
                                             </select>
                                         </div>
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">Default Category</label>
+                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Default Category</label>
                                             <input
                                                 type="text"
                                                 value={settings.default_category || ''}
                                                 onChange={(e) => setSettings({ ...settings, default_category: e.target.value })}
                                                 onBlur={() => handleSettingsUpdate({ default_category: settings.default_category })}
                                                 placeholder="e.g., Food, Travel"
-                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-primary outline-none"
+                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary outline-none"
                                             />
                                         </div>
                                         <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">Default Payment Method</label>
+                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Default Payment Method</label>
                                             <input
                                                 type="text"
                                                 value={settings.default_payment_method || ''}
                                                 onChange={(e) => setSettings({ ...settings, default_payment_method: e.target.value })}
                                                 onBlur={() => handleSettingsUpdate({ default_payment_method: settings.default_payment_method })}
                                                 placeholder="e.g., Cash, Card"
-                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 focus:border-primary outline-none"
+                                                className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:border-primary outline-none"
                                             />
                                         </div>
                                     </div>
diff --git a/Frontend/src/store/useStore.js b/Frontend/src/store/useStore.js
index 69da393..bf8baf7 100644
--- a/Frontend/src/store/useStore.js
+++ b/Frontend/src/store/useStore.js
@@ -25,7 +25,14 @@ const calculateBalances = (expenses) => {
 
 export const useStore = create((set, get) => ({
   user: JSON.parse(localStorage.getItem('user')) || null,
-  theme: localStorage.getItem('theme') || 'auto',
+  theme: (() => {
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark') return stored;
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })(),
   groups: [],
   currentGroup: null,
   expenses: [],

From c0526606f7b98f417fa25e08f22c94048ff060c0 Mon Sep 17 00:00:00 2001
From: Monu123a <monuahlawatxyx@gmail.com>
Date: Tue, 2 Dec 2025 00:00:39 +0530
Subject: [PATCH 2/2] Fix: remove notification icons #27

---
 Frontend/src/components/Layout.jsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/Frontend/src/components/Layout.jsx b/Frontend/src/components/Layout.jsx
index 4d237a2..5a58e03 100644
--- a/Frontend/src/components/Layout.jsx
+++ b/Frontend/src/components/Layout.jsx
@@ -9,14 +9,13 @@ import {
   LogOut,
   Menu,
   X,
-  Bell,
   ChevronDown,
   Sun,
   Moon
 } from 'lucide-react';
 
 export default function Layout({ children }) {
-  const { user, logout, notifications, unreadCount, theme, setTheme } = useStore();
+  const { user, logout, theme, setTheme } = useStore();
   const navigate = useNavigate();
   const location = useLocation();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -153,16 +152,6 @@ export default function Layout({ children }) {
               {theme === 'dark' ? <Sun size={24} /> : <Moon size={24} />}
             </button>
 
-            {/* Notifications */}
-            <div className="relative">
-              <button className="p-2 text-gray-400 dark:text-gray-500 hover:text-primary dark:hover:text-primary-light transition-colors rounded-full hover:bg-indigo-50 dark:hover:bg-gray-700 relative">
-                <Bell size={24} />
-                {unreadCount > 0 && (
-                  <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 dark:bg-red-400 rounded-full border-2 border-white dark:border-gray-800" />
-                )}
-              </button>
-            </div>
-
             {/* User Profile */}
             <div className="relative">
               <button