From f9062e4baa37c098c0a559a29ccc14518bd5b69b Mon Sep 17 00:00:00 2001
From: faizaanjum7 <faizaanjumm07@gmail.com>
Date: Sun, 17 May 2026 19:18:03 +0530
Subject: [PATCH 1/4] feat: implement dark mode across application

---
 frontend/src/App.jsx                          |  2 +-
 .../components/Dashboard/DashboardTasks.jsx   | 12 +++----
 .../src/components/Dashboard/TaskPreview.jsx  | 12 +++----
 frontend/src/components/EmptyState.jsx        |  3 +-
 frontend/src/components/Navbar.jsx            | 32 ++++++-----------
 .../src/components/Routine/TaskLibrary.jsx    | 12 +++----
 .../src/components/Task/TaskFormModal.jsx     |  8 ++---
 frontend/src/components/Task/TaskItem.jsx     | 10 +++---
 frontend/src/components/ThemeToggle.jsx       | 36 +++++++++++++++++++
 frontend/src/context/ThemeContext.jsx         | 10 ++++++
 frontend/src/index.css                        | 12 ++++++-
 frontend/src/pages/Dashboard.jsx              |  6 ++--
 frontend/src/pages/Login.jsx                  | 12 +++++--
 frontend/src/pages/RoutineBuilder.jsx         |  4 +--
 frontend/src/pages/Signup.jsx                 | 15 ++++++--
 frontend/src/pages/Tasks.jsx                  |  8 ++---
 16 files changed, 129 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/components/ThemeToggle.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 460483e3..6e844d71 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,7 +16,7 @@ const App = () => {
   return (
     <BrowserRouter>
       <Navbar />
-      <main className="app-bg min-h-screen pt-15 flex justify-center items-center">
+      <main className="app-bg min-h-screen pt-15 flex justify-center items-center bg-white text-black transition-colors duration-300 dark:bg-gray-900 dark:text-white">
         <Routes>
           <Route path="/" element={<Login />} />
           <Route path="/login" element={<Login />} />
diff --git a/frontend/src/components/Dashboard/DashboardTasks.jsx b/frontend/src/components/Dashboard/DashboardTasks.jsx
index 3b285701..ba859860 100644
--- a/frontend/src/components/Dashboard/DashboardTasks.jsx
+++ b/frontend/src/components/Dashboard/DashboardTasks.jsx
@@ -42,7 +42,7 @@ export default function DashboardTasks({ tasks, updateTask }) {
         </div>
 
         <button
-          className="text-sm text-primary hover:underline underline-offset-4 cursor-pointer"
+          className="text-sm text-primary hover:opacity-80 underline-offset-4 cursor-pointer transition-colors duration-200"
           onClick={() => navigate("/tasks")}
         >
           Manage →
@@ -75,8 +75,8 @@ export default function DashboardTasks({ tasks, updateTask }) {
                 <p
                   className={`text-sm font-medium transition-colors ${
                     task.status === "Completed"
-                      ? "line-through text-muted"
-                      : "text-main"
+                      ? "line-through text-muted dark:text-gray-300"
+                      : "text-main dark:text-white"
                   }`}
                 >
                   {task.title}
@@ -92,20 +92,20 @@ export default function DashboardTasks({ tasks, updateTask }) {
                   </span>
 
                   {task.status === "Completed" && (
-                    <span className="text-[11px] text-muted">Completed</span>
+                    <span className="text-[11px] text-muted dark:text-gray-300">Completed</span>
                   )}
                 </div>
               </div>
 
               {/* Hover affordance */}
-              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-muted opacity-0 group-hover:opacity-100 transition">
+              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs text-muted dark:text-gray-300 opacity-0 group-hover:opacity-100 transition">
                 ✓
               </span>
             </div>
           ))}
         </div>
       ) : (
-        <div className="text-sm text-muted text-center py-6">
+        <div className="text-sm text-muted dark:text-gray-300 text-center py-6">
           No tasks for today.
           <span
             className="block mt-2 text-primary hover:underline cursor-pointer"
diff --git a/frontend/src/components/Dashboard/TaskPreview.jsx b/frontend/src/components/Dashboard/TaskPreview.jsx
index c15629e4..048789ae 100644
--- a/frontend/src/components/Dashboard/TaskPreview.jsx
+++ b/frontend/src/components/Dashboard/TaskPreview.jsx
@@ -54,7 +54,7 @@ export default function TaskPreview({ tasks , updateTask}) {
             return (
             <div
               key={task._id}
-              className={`flex items-center gap-4 border-l-4 rounded-xl p-4 transition
+              className={`flex items-center gap-4 border-l-4 rounded-xl p-4 transition-all duration-200 shadow-sm hover:shadow-md
               ${priorityBorder[task.priority]}
               bg-white/80 hover:bg-white dark:bg-slate-800/80 dark:hover:bg-slate-800 shadow-sm`}
             >
@@ -75,8 +75,8 @@ export default function TaskPreview({ tasks , updateTask}) {
                 <p
                   className={`text-sm font-medium ${
                     task.status === "Completed"
-                      ? "line-through decoration-2 decoration-muted text-muted"
-                      : "text-main"
+                      ? "line-through decoration-2 decoration-muted text-muted dark:text-gray-300"
+                      : "text-main dark:text-white"
                   }`}
                 >
                   {task.title}
@@ -92,7 +92,7 @@ export default function TaskPreview({ tasks , updateTask}) {
                   </span>
 
                   {task.dueDate && (
-                    <span className="text-[11px] text-muted">
+                    <span className="text-[11px] text-muted dark:text-gray-300">
                       {new Date(task.dueDate).toLocaleDateString("en-US", {
                         weekday: "short",
                       })}
@@ -114,7 +114,7 @@ export default function TaskPreview({ tasks , updateTask}) {
          ) })}
         </div>
       ) : (
-        <p className="text-sm text-muted text-center py-6">
+        <p className="text-sm text-muted dark:text-gray-300 text-center py-6">
           No upcoming tasks.
         </p>
       )}
@@ -122,7 +122,7 @@ export default function TaskPreview({ tasks , updateTask}) {
       <div className="mt-4 text-sm text-primary">
         <button
           onClick={() => navigate("/tasks")}
-          className="hover:underline cursor-pointer"
+          className="hover:opacity-80 cursor-pointer transition-colors duration-200"
         >
           View All Tasks →
         </button>
diff --git a/frontend/src/components/EmptyState.jsx b/frontend/src/components/EmptyState.jsx
index 947512cb..fc0a94df 100644
--- a/frontend/src/components/EmptyState.jsx
+++ b/frontend/src/components/EmptyState.jsx
@@ -39,6 +39,7 @@ const CONFIG = {
 export default function EmptyState({ type = "tasks", onAction }) {
   const [hovered, setHovered] = useState(false);
   const cfg = CONFIG[type] ?? CONFIG.tasks;
+  const isDark = document.documentElement.classList.contains("dark");
 
   return (
     <div className="relative flex flex-col items-center justify-center gap-4 px-8 py-14 rounded-[20px] bg-gradient-to-br from-indigo-50/50 to-purple-50/50 dark:from-slate-800/30 dark:to-slate-800/50 border border-dashed border-purple-200 dark:border-slate-700 max-w-[420px] mx-auto text-center overflow-hidden font-sans shadow-xs">
@@ -60,4 +61,4 @@ export default function EmptyState({ type = "tasks", onAction }) {
       </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 859cba8e..8ef31f09 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,11 +2,12 @@ import { useState, useContext, useEffect } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 // eslint-disable-next-line no-unused-vars
 import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, UserPlus, Sun, Moon } from "lucide-react";
+import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, UserPlus } from "lucide-react";
 import { AuthContext } from "../context/AuthContext";
 import { ThemeContext } from "../context/ThemeContext";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import ThemeToggle from "./ThemeToggle";
 
 // Utility for merging tailwind classes safely
 function cn(...inputs) {
@@ -91,7 +92,7 @@ const Navbar = () => {
                       "px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 flex items-center gap-2",
                       isActive
                         ? "bg-[#d0f6e3] text-[#3b8ea0] shadow-sm"
-                        : "text-[#4eb7b3] hover:bg-[#d0f6e3]/50 hover:text-[#3b8ea0]"
+                        : "text-[#4eb7b3] hover:bg-[#d0f6e3]/50 hover:text-[#3b8ea0] dark:text-gray-300 dark:hover:bg-gray-800"
                     )
                   }
                 >
@@ -104,26 +105,12 @@ const Navbar = () => {
 
           {/* Desktop Auth Buttons */}
           <div className="hidden md:flex items-center gap-4">
-            {/* Premium Dark Mode Toggle */}
-            <motion.button
-              whileHover={{ scale: 1.1, rotate: 15 }}
-              whileTap={{ scale: 0.9 }}
-              onClick={toggleTheme}
-              className="p-2.5 rounded-xl border border-soft text-main hover:bg-[#d0f6e3]/30 dark:hover:bg-slate-800 transition-colors focus:outline-none cursor-pointer flex items-center justify-center mr-1"
-              aria-label="Toggle dark mode"
-            >
-              {theme === "dark" ? (
-                <Sun size={18} className="text-yellow-400 fill-yellow-400" />
-              ) : (
-                <Moon size={18} className="text-[#3b8ea0] fill-[#3b8ea0]/10" />
-              )}
-            </motion.button>
-
+            <ThemeToggle />
             {!token ? (
               <>
                 <Link
                   to="/login"
-                  className="text-sm font-medium text-[#4eb7b3] hover:text-[#3b8ea0] transition-colors px-4 py-2 rounded-xl hover:bg-[#d0f6e3]/50"
+                  className="text-sm font-medium text-[#4eb7b3] hover:text-[#3b8ea0] dark:hover:text-white dark:hover:bg-gray-800 transition-colors px-4 py-2 rounded-xl hover:bg-[#d0f6e3]/50"
                 >
                   Login
                 </Link>
@@ -147,9 +134,10 @@ const Navbar = () => {
 
           {/* Mobile Menu Toggle Button */}
           <div className="md:hidden flex items-center">
+            <ThemeToggle />
             <button
               onClick={() => setIsOpen(!isOpen)}
-              className="p-2 rounded-xl text-[#3b8ea0] hover:bg-[#d0f6e3] transition-colors focus:outline-none"
+              className="p-2 rounded-xl text-[#3b8ea0] dark:text-white hover:bg-[#d0f6e3] dark:hover:bg-gray-800 transition-colors focus:outline-none"
               aria-label="Toggle menu"
             >
               <AnimatePresence mode="wait">
@@ -176,7 +164,7 @@ const Navbar = () => {
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
             transition={{ duration: 0.2, ease: "easeInOut" }}
-            className="md:hidden border-b border-soft bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl overflow-hidden"
+            className="md:hidden border-b border-soft dark:border-gray-700/60 bg-white/95 dark:bg-slate-900/95 backdrop-blur-xl overflow-hidden"
           >
             <div className="px-4 pt-2 pb-6 space-y-1">
               {token && navLinks.map((link) => (
@@ -189,7 +177,7 @@ const Navbar = () => {
                       "px-4 py-3 rounded-xl text-base font-medium transition-colors flex items-center gap-3 w-full",
                       isActive
                         ? "bg-[#d0f6e3] text-[#3b8ea0]"
-                        : "text-[#4eb7b3] hover:bg-[#d0f6e3]/50 hover:text-[#3b8ea0]"
+                        : "text-[#4eb7b3] dark:text-gray-300 hover:bg-[#d0f6e3]/50 dark:hover:bg-gray-800 hover:text-[#3b8ea0]"
                     )
                   }
                 >
@@ -227,7 +215,7 @@ const Navbar = () => {
                     <Link
                       to="/login"
                       onClick={() => setIsOpen(false)}
-                      className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[#3b8ea0] font-medium hover:bg-[#d0f6e3] transition-colors"
+                      className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[#3b8ea0] dark:text-gray-300 font-medium hover:bg-[#d0f6e3]  dark:hover:bg-gray-800 dark:hover:text-white transition-colors"
                     >
                       <LogIn size={18} />
                       Login
diff --git a/frontend/src/components/Routine/TaskLibrary.jsx b/frontend/src/components/Routine/TaskLibrary.jsx
index c3efdb66..b223be2c 100644
--- a/frontend/src/components/Routine/TaskLibrary.jsx
+++ b/frontend/src/components/Routine/TaskLibrary.jsx
@@ -30,9 +30,9 @@ function DraggableTask({ task }) {
       style={style}
       {...listeners}
       {...attributes}
-      className="group flex items-center gap-3 rounded-xl border-soft bg-white/80 dark:bg-slate-800/80 p-3
-                 cursor-grab active:cursor-grabbing
-                 hover:bg-white dark:hover:bg-slate-800 hover:shadow-md transition hover-lift"
+      className="group flex items-center gap-3 rounded-xl border-soft dark:border-gray-700/60 bg-white/80 dark:bg-slate-800/80 p-3
+           cursor-grab active:cursor-grabbing
+           hover:bg-white dark:hover:bg-slate-800 hover:shadow-md transition hover-lift"
       role="button"
       tabIndex={0}
       aria-label={`${task.title} - Drag to schedule or use arrow keys`}
@@ -51,7 +51,7 @@ function DraggableTask({ task }) {
       />
 
       {/* Title */}
-      <p className="flex-1 text-sm font-medium text-main truncate">
+      <p className="flex-1 text-sm font-medium text-main dark:text-white truncate">
         {task.title}
       </p>
     </div>
@@ -74,7 +74,7 @@ export default function TaskLibrary({ onAddTask }) {
       <div className="mb-4">
         <div className="flex items-center gap-2">
           <h2 className="text-lg font-semibold text-main">Task Library</h2>
-          <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-soft text-main">
+          <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-blue-50 text-main dark:bg-gray-700 dark:text-gray-200">
             {filteredTasks?.length ?? 0}
           </span>
         </div>
@@ -87,7 +87,7 @@ export default function TaskLibrary({ onAddTask }) {
         placeholder="Search tasks…"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        className="mb-4 rounded-xl border-soft px-3 py-2 text-sm focus:outline-none bg-transparent text-main"
+        className="mb-4 rounded-xl border-soft px-3 py-2 text-sm bg-transparent text-main dark:bg-slate-800 dark:text-white dark:border-gray-700 dark:placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#4eb7b3]"
       />
 
       {/* Task List */}
diff --git a/frontend/src/components/Task/TaskFormModal.jsx b/frontend/src/components/Task/TaskFormModal.jsx
index 9bdfa874..8e5fe277 100644
--- a/frontend/src/components/Task/TaskFormModal.jsx
+++ b/frontend/src/components/Task/TaskFormModal.jsx
@@ -84,7 +84,7 @@ export default function TaskFormModal({ task, onClose, onSubmit }) {
               type="text"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
-              className="w-full mt-1 p-2 border border-soft rounded-lg focus:ring-(--primary) focus:border-(--primary) bg-transparent text-main"
+              className="w-full mt-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 focus:ring-(--primary) focus:border-(--primary)"
               placeholder="Task title"
               required
             />
@@ -101,7 +101,7 @@ export default function TaskFormModal({ task, onClose, onSubmit }) {
               onChange={(e) =>
                 setDescription(e.target.value)
               }
-              className="w-full mt-1 p-2 border border-soft rounded-lg focus:ring-(--primary) focus:border-(--primary) bg-transparent text-main"
+              className="w-full mt-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 focus:ring-(--primary) focus:border-(--primary)"
               placeholder="Optional task description"
               rows={3}
               maxLength={300}
@@ -156,7 +156,7 @@ export default function TaskFormModal({ task, onClose, onSubmit }) {
             <select
               value={priority}
               onChange={(e) => setPriority(e.target.value)}
-              className="w-full mt-1 p-2 border border-soft rounded-lg focus:ring-(--primary) focus:border-(--primary) bg-transparent text-main dark:bg-slate-800"
+              className="w-full mt-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 focus:ring-(--primary) focus:border-(--primary)"
               required
             >
               {priorities.map((p) => (
@@ -177,7 +177,7 @@ export default function TaskFormModal({ task, onClose, onSubmit }) {
               max={maxDateStr}
               onChange={(e) => setDueDate(e.target.value)}
               onClick={(e) => e.target.showPicker?.()}
-              className="w-full mt-1 p-2 border border-soft rounded-lg focus:ring-(--primary) focus:border-(--primary) bg-transparent text-main"
+              className="w-full mt-1 p-2 border border-soft rounded-lg bg-transparent text-main dark:bg-slate-800 focus:ring-(--primary) focus:border-(--primary)"
               required
             />
           </div>
diff --git a/frontend/src/components/Task/TaskItem.jsx b/frontend/src/components/Task/TaskItem.jsx
index 9eb6b959..147dda88 100644
--- a/frontend/src/components/Task/TaskItem.jsx
+++ b/frontend/src/components/Task/TaskItem.jsx
@@ -26,7 +26,7 @@ export default function TaskItem({ task, onToggleComplete, onDelete, onUpdate, i
           w-full rounded-xl border-l-4
           ${priorityStyles[task.priority]}
           ${isCompleted ? "opacity-70" : ""}
-          shadow-sm hover:shadow-md transition
+          shadow-sm hover:shadow-md transition dark:border-gray-700 dark:text-white
         `}
       >
         <div className="flex items-center gap-6 px-6 py-6">
@@ -44,7 +44,7 @@ export default function TaskItem({ task, onToggleComplete, onDelete, onUpdate, i
               w-8 h-8 rounded-md flex items-center justify-center
               border-soft shrink-0 cursor-pointer
               transition-transform duration-150
-              ${isCompleted ? "bg-(--primary) text-white" : "bg-white dark:bg-slate-800"}
+              ${isCompleted ? "bg-(--primary) text-white" : "bg-white dark:bg-slate-800 dark:text-white"}
             `}
           >
             {isCompleted && <Check size={18} />}
@@ -54,7 +54,7 @@ export default function TaskItem({ task, onToggleComplete, onDelete, onUpdate, i
           <div className="flex-1">
             <p
               className={`text-lg font-semibold ${
-                isCompleted ? "line-through text-muted" : "text-main"
+                isCompleted ? "line-through text-muted dark:text-gray-300" : "text-main"
               }`}
             >
               {task.title}
@@ -98,7 +98,7 @@ export default function TaskItem({ task, onToggleComplete, onDelete, onUpdate, i
             {/* Edit Button */}
             <button
               onClick={() => setIsEditModalOpen(true)}
-              className="p-2 rounded-lg hover:bg-white dark:hover:bg-slate-700 transition cursor-pointer"
+              className="p-2 rounded-lg hover:bg-white/80 dark:hover:bg-slate-700 transition cursor-pointer"
             >
               <Pencil size={18} className="text-main" />
             </button>
@@ -106,7 +106,7 @@ export default function TaskItem({ task, onToggleComplete, onDelete, onUpdate, i
             {/* Delete Button - Fix : Ensure onDelete uses task._id*/}
             <button
               onClick={()=> onDelete(task._id)}
-              className="p-2 rounded-lg hover:bg-red-100 transition cursor-pointer"
+              className="p-2 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/20 transition cursor-pointer"
             >
               <Trash2 size={18} className="text-red-500" />
             </button>
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 00000000..d7f3c5b4
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,36 @@
+import { Moon, Sun } from "lucide-react";
+import { motion } from "framer-motion";
+import { useTheme } from "../context/ThemeContext";
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <motion.button
+      whileHover={{ scale: 1.1, rotate: 15 }}
+      whileTap={{ scale: 0.9 }}
+      onClick={toggleTheme}
+      className="
+        p-2.5 rounded-xl
+        border border-soft
+
+        text-main
+
+        hover:bg-[#d0f6e3]/30
+        dark:hover:bg-slate-800
+
+        transition-colors
+        focus:outline-none
+        cursor-pointer
+        flex items-center justify-center
+      "
+      aria-label="Toggle dark mode"
+    >
+      {theme === "dark" ? (
+        <Sun size={18} className="text-yellow-400 fill-yellow-400" />
+      ) : (
+        <Moon size={18} className="text-[#3b8ea0] fill-[#3b8ea0]/10" />
+      )}
+    </motion.button>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/context/ThemeContext.jsx b/frontend/src/context/ThemeContext.jsx
index f283e77e..6635e95f 100644
--- a/frontend/src/context/ThemeContext.jsx
+++ b/frontend/src/context/ThemeContext.jsx
@@ -34,3 +34,13 @@ export const ThemeProvider = ({ children }) => {
     </ThemeContext.Provider>
   );
 };
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+
+  return context;
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 49698a98..7c82a82f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   /* App background (outer layout) */
   --bg: #d0f6e3;
@@ -126,7 +128,7 @@ html.dark, html.dark body {
   }
 
   .card-muted {
-    @apply bg-white/80;
+    @apply bg-white/80 dark:bg-gray-800/80;
   }
 
   .card-primary {
@@ -174,4 +176,12 @@ html.dark, html.dark body {
       transform: translateY(0);
     }
   }
+
+
+  * {
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease;
+  }
 }
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 078859cf..ebf7abdc 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -134,7 +134,7 @@ export default function Dashboard() {
             icon={<CheckCircle2 size={20} />}
           />
         </div>
-        <div className="flex-1 animate-in delay-200">
+        <div className="flex-1 animate-in delay-200 transition-none">
           <StatCard
             label="This Week"
             value={`${weeklyCompletionPercent}%`}
@@ -165,7 +165,7 @@ export default function Dashboard() {
           <div className="flex justify-between items-center mb-4">
             <h2 className="text-lg font-semibold text-main">Saved Routines</h2>
             <button
-              className="text-sm text-primary hover:underline underline-offset-4 cursor-pointer flex items-center gap-1"
+              className="text-sm text-primary hover:opacity-80 underline-offset-4 cursor-pointer transition-colors duration-200 flex items-center gap-1"
               onClick={() => navigate("/routine-builder")}
             >
               Build
@@ -184,7 +184,7 @@ export default function Dashboard() {
               {savedRoutines.map((routine) => (
                 <li
                   key={routine._id}
-                  className="border-l-4 border-primary rounded-xl p-4 bg-white/80 hover:bg-white dark:bg-slate-800/80 dark:hover:bg-slate-800 shadow-sm hover:shadow-md transition-all duration-200 animate-in"
+                  className="border-l-4 border-primary rounded-xl p-4 bg-white/80 hover:bg-white dark:bg-slate-800/80 dark:hover:bg-slate-800 dark:border-gray-700/60 shadow-sm hover:shadow-md transition-all duration-200 animate-in"
                 >
                   <p className="font-medium text-main">{routine.name}</p>
                   {routine.description && (
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 1215979d..ddc2fa24 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -84,6 +84,10 @@ const Login = () => {
             shadow-xs
             input-focus
             hover-lift
+            dark:bg-gray-700
+            dark:text-white
+            dark:border-gray-600
+            dark:placeholder:text-gray-400
           "
         />
       </div>
@@ -108,16 +112,20 @@ const Login = () => {
               text-sm
               surface-bg
               border-soft
-              rounded-base
+              rounded-sm
               shadow-xs
               input-focus
               hover-lift
+              dark:bg-gray-700
+              dark:text-white
+              dark:border-gray-600
+              dark:placeholder:text-gray-400
             "
           />
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-main transition-colors cursor-pointer flex items-center justify-center"
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-main dark:text-gray-300 dark:hover:text-white transition-colors cursor-pointer flex items-center justify-center"
             aria-label={showPassword ? "Hide password" : "Show password"}
           >
             {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
diff --git a/frontend/src/pages/RoutineBuilder.jsx b/frontend/src/pages/RoutineBuilder.jsx
index 565f8bea..f29c41d5 100644
--- a/frontend/src/pages/RoutineBuilder.jsx
+++ b/frontend/src/pages/RoutineBuilder.jsx
@@ -157,7 +157,7 @@ export default function RoutineBuilder() {
         <header className="mb-8 flex items-start gap-4 animate-in delay-100">
           <button
             onClick={() => navigate("/dashboard")}
-            className="mt-1 rounded-lg p-2 border border-soft text-muted hover:bg-white transition cursor-pointer"
+            className="mt-1 rounded-lg p-2 border border-soft text-muted dark:text-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 transition cursor-pointer"
           >
             <ArrowLeft size={16} />
           </button>
@@ -286,7 +286,7 @@ export default function RoutineBuilder() {
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Add a description (optional)"
               rows="3"
-              className="w-full mb-4 rounded-lg border-soft px-3 py-2 text-sm focus:ring-primary bg-transparent text-main resize-none"
+              className="w-full mb-4 rounded-lg border-soft px-3 py-2 text-sm focus:ring-primary dark:focus:ring-primary bg-white dark:bg-transparent dark:text-white resize-none"
             />
 
             <div className="flex justify-end gap-3">
diff --git a/frontend/src/pages/Signup.jsx b/frontend/src/pages/Signup.jsx
index f2abc185..1bea9ca1 100644
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -111,6 +111,11 @@ const Signup = () => {
             shadow-xs
             input-focus hover-lift
             ${errors.name ? "border-red-500" : "border-soft"}
+            dark:bg-gray-700
+            dark:text-white
+            dark:border-gray-600
+            dark:placeholder:text-gray-400
+          "
           `}
         />
         {errors.name && <span className="text-red-500 text-xs">{errors.name}</span>}
@@ -136,7 +141,13 @@ const Signup = () => {
             border-soft
             rounded-sm
             shadow-xs
-            input-focus hover-lift
+            input-focus
+            hover-lift
+            dark:bg-gray-700
+            dark:text-white
+            dark:border-gray-600
+            dark:placeholder:text-gray-400
+
           "
         />
       </div>
@@ -188,7 +199,7 @@ const Signup = () => {
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-main transition-colors cursor-pointer flex items-center justify-center"
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-main dark:text-gray-300 dark:hover:text-white transition-colors cursor-pointer flex items-center justify-center"
             aria-label={showPassword ? "Hide password" : "Show password"}
           >
             {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
diff --git a/frontend/src/pages/Tasks.jsx b/frontend/src/pages/Tasks.jsx
index 9571f95b..afea89a1 100644
--- a/frontend/src/pages/Tasks.jsx
+++ b/frontend/src/pages/Tasks.jsx
@@ -98,7 +98,7 @@ export default function Tasks() {
           <div className="flex items-center gap-4">
             <button
               onClick={() => navigate("/dashboard")}
-              className="rounded-lg p-2 border border-soft text-muted hover:bg-white dark:hover:bg-slate-800 cursor-pointer"
+              className="rounded-lg p-2 border border-soft text-muted dark:text-gray-200 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-700 cursor-pointer"
             >
               <ArrowLeft size={16} />
             </button>
@@ -210,7 +210,7 @@ export default function Tasks() {
               <h3 className="text-lg font-semibold text-main mb-2">
                 Completion
               </h3>
-              <div className="w-full h-2 bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden">
+              <div className="w-full h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
                 <div
                   className="h-full bg-linear-to-r from-blue-500 to-indigo-500 transition-all"
                   style={{ width: `${completionPercent}%` }}
@@ -262,8 +262,8 @@ export default function Tasks() {
             <div
               className={`card p-4 ${
                 isOverloaded
-                  ? "bg-red-50 text-red-600 dark:bg-red-950/20 dark:text-red-400"
-                  : "bg-green-50 text-green-700 dark:bg-green-950/20 dark:text-green-400"
+                  ? "bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-300"
+                  : "bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300"
               }`}
             >
               <p className="text-sm font-medium">

From ed10c780408d8741c60a75ae4814b6789f7001de Mon Sep 17 00:00:00 2001
From: faizaanjum7 <faizaanjumm07@gmail.com>
Date: Sun, 17 May 2026 20:41:57 +0530
Subject: [PATCH 2/4] fix: improve dark mode and UI consistency

---
 frontend/src/components/Navbar.jsx      | 27 ++-----------------------
 frontend/src/components/ScrollToTop.jsx |  2 +-
 frontend/src/context/ThemeContext.jsx   |  2 +-
 3 files changed, 4 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 8ef31f09..0c28b59e 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,7 +2,7 @@ import { useState, useContext, useEffect } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 // eslint-disable-next-line no-unused-vars
 import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, UserPlus } from "lucide-react";
+import { Menu, X, LayoutDashboard, CheckSquare, Calendar, LogOut, LogIn, UserPlus, Sun, Moon } from "lucide-react";
 import { AuthContext } from "../context/AuthContext";
 import { ThemeContext } from "../context/ThemeContext";
 import { clsx } from "clsx";
@@ -133,7 +133,7 @@ const Navbar = () => {
           </div>
 
           {/* Mobile Menu Toggle Button */}
-          <div className="md:hidden flex items-center">
+          <div className="md:hidden flex items-center gap-2">
             <ThemeToggle />
             <button
               onClick={() => setIsOpen(!isOpen)}
@@ -186,29 +186,6 @@ const Navbar = () => {
                 </NavLink>
               ))}
 
-              {/* Premium Mobile Dark Mode Toggle */}
-              <div className="flex items-center justify-between px-4 py-2 border-t border-soft/30 mt-2">
-                <span className="text-sm font-medium text-main">Theme Mode</span>
-                <motion.button
-                  whileTap={{ scale: 0.95 }}
-                  onClick={toggleTheme}
-                  className="p-2 rounded-xl border border-soft text-main hover:bg-[#d0f6e3]/30 dark:hover:bg-slate-800 transition-colors focus:outline-none cursor-pointer flex items-center gap-2"
-                  aria-label="Toggle dark mode"
-                >
-                  {theme === "dark" ? (
-                    <>
-                      <Sun size={16} className="text-yellow-400 fill-yellow-400" />
-                      <span className="text-xs text-yellow-400 font-semibold uppercase tracking-wider">Light</span>
-                    </>
-                  ) : (
-                    <>
-                      <Moon size={16} className="text-[#3b8ea0] fill-[#3b8ea0]/10" />
-                      <span className="text-xs text-[#3b8ea0] font-semibold uppercase tracking-wider">Dark</span>
-                    </>
-                  )}
-                </motion.button>
-              </div>
-
               <div className={cn("flex flex-col gap-2", token ? "pt-4 mt-2 border-t border-[#98e1d7]/30" : "pt-2")}>
                 {!token ? (
                   <>
diff --git a/frontend/src/components/ScrollToTop.jsx b/frontend/src/components/ScrollToTop.jsx
index 5a48508c..9f7f30f2 100644
--- a/frontend/src/components/ScrollToTop.jsx
+++ b/frontend/src/components/ScrollToTop.jsx
@@ -45,7 +45,7 @@ const ScrollToTop = () => {
       {shouldShow && (
         <button
           onClick={scrollToTop}
-          className="p-3 rounded-full bg-[var(--text-main)] text-white shadow-lg hover:bg-[var(--primary)] transition-all duration-300 transform hover:scale-110 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:ring-offset-2"
+          className="p-3 rounded-full bg-[var(--primary)] text-white shadow-lg border border-white/10 dark:border-slate-700 hover:bg-[var(--primary-hover)] transition-all duration-300 transform hover:scale-110 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:ring-offset-2 dark:focus:ring-offset-slate-900"
           aria-label="Scroll to top"
         >
           <ArrowUp size={24} />
diff --git a/frontend/src/context/ThemeContext.jsx b/frontend/src/context/ThemeContext.jsx
index 6635e95f..9583ab4d 100644
--- a/frontend/src/context/ThemeContext.jsx
+++ b/frontend/src/context/ThemeContext.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
-import { createContext, useEffect, useState } from "react";
+import { createContext, useEffect, useState, useContext } from "react";
 
 export const ThemeContext = createContext(null);
 

From cd85005246f1e1f1390cef47f5ee4585c4c1e9c9 Mon Sep 17 00:00:00 2001
From: faizaanjum7 <faizaanjumm07@gmail.com>
Date: Sun, 17 May 2026 21:31:19 +0530
Subject: [PATCH 3/4] fix: resolve svg attribute warning

---
 frontend/src/components/EmptyState.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/EmptyState.jsx b/frontend/src/components/EmptyState.jsx
index fc0a94df..68a1060d 100644
--- a/frontend/src/components/EmptyState.jsx
+++ b/frontend/src/components/EmptyState.jsx
@@ -20,7 +20,7 @@ const CONFIG = {
     icon: (
       <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: 80, height: 80 }}>
         <circle cx="40" cy="40" r="28" stroke="#6366f1" strokeWidth="3" opacity="0.2" />
-        <circle cx="40" cy="40" r="28" stroke="#6366f1" strokeWidth="3" strokeLinedasharray="44 132" strokeLinecap="round" opacity="0.7" />
+        <circle cx="40" cy="40" r="28" stroke="#6366f1" strokeWidth="3" strokeDasharray="44 132" strokeLinecap="round" opacity="0.7" />
         <circle cx="40" cy="40" r="3" fill="#6366f1" />
         <path d="M40 40 V20" stroke="#6366f1" strokeWidth="2.5" strokeLinecap="round" />
         <path d="M40 40 L54 48" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" opacity="0.6" />
@@ -39,7 +39,6 @@ const CONFIG = {
 export default function EmptyState({ type = "tasks", onAction }) {
   const [hovered, setHovered] = useState(false);
   const cfg = CONFIG[type] ?? CONFIG.tasks;
-  const isDark = document.documentElement.classList.contains("dark");
 
   return (
     <div className="relative flex flex-col items-center justify-center gap-4 px-8 py-14 rounded-[20px] bg-gradient-to-br from-indigo-50/50 to-purple-50/50 dark:from-slate-800/30 dark:to-slate-800/50 border border-dashed border-purple-200 dark:border-slate-700 max-w-[420px] mx-auto text-center overflow-hidden font-sans shadow-xs">

From fd2c0b1913c99db05f8b98af2847d8cf4fae9d47 Mon Sep 17 00:00:00 2001
From: faizaanjum7 <faizaanjumm07@gmail.com>
Date: Tue, 2 Jun 2026 16:04:01 +0530
Subject: [PATCH 4/4] fix:lint errors

---
 frontend/index.html                           | 85 -------------------
 frontend/src/App.jsx                          |  2 +-
 .../src/components/Task/TaskFormModal.jsx     |  2 -
 frontend/src/components/ThemeToggle.jsx       |  3 +-
 frontend/src/index.css                        |  2 +
 5 files changed, 5 insertions(+), 89 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 094b2ada..7f6889b9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -25,88 +25,3 @@
 </body>
 
 </html>
-
-/* Navbar Container */
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 2rem;
-  flex-wrap: wrap;
-  width: 100%;
-}
-
-/* Navigation Links */
-.nav-links {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  list-style: none;
-  flex-wrap: wrap;
-}
-
-/* Nav Link Styling */
-.nav-links a {
-  text-decoration: none;
-  font-size: 1rem;
-  transition: 0.3s ease;
-}
-
-/* Better Hover Effect */
-.nav-links a:hover {
-  opacity: 0.8;
-}
-
-/* Tablet Responsiveness */
-@media screen and (max-width: 992px) {
-  .navbar {
-    padding: 1rem;
-  }
-
-  .nav-links {
-    gap: 1rem;
-  }
-
-  .nav-links a {
-    font-size: 0.95rem;
-  }
-}
-
-/* Mobile Responsiveness */
-@media screen and (max-width: 768px) {
-
-  .navbar {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .nav-links {
-    justify-content: center;
-    margin-top: 1rem;
-    gap: 0.8rem;
-  }
-
-  .nav-links a {
-    font-size: 0.9rem;
-  }
-}
-
-/* Small Mobile Devices */
-@media screen and (max-width: 480px) {
-
-  .navbar {
-    padding: 0.8rem;
-  }
-
-  .nav-links {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .nav-links a {
-    width: 100%;
-    display: block;
-    padding: 0.5rem 0;
-  }
-}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 27c906b4..d955f861 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -90,7 +90,7 @@ const App = () => {
   return (
     <BrowserRouter>
       <Navbar />
-      <main className="pp-bg min-h-screen pt-15 flex flex-col bg-white text-black transition-colors duration-300 dark:bg-gray-900 dark:text-white">
+      <main className="app-bg min-h-screen pt-15 flex flex-col text-main transition-colors duration-300">
         <Routes>
           <Route path="/"       element={<PublicRoute><AuthLayout><Login /></AuthLayout></PublicRoute>} />
           <Route path="/login"  element={<PublicRoute><AuthLayout><Login /></AuthLayout></PublicRoute>} />
diff --git a/frontend/src/components/Task/TaskFormModal.jsx b/frontend/src/components/Task/TaskFormModal.jsx
index 64cf303a..c4dc0285 100644
--- a/frontend/src/components/Task/TaskFormModal.jsx
+++ b/frontend/src/components/Task/TaskFormModal.jsx
@@ -47,7 +47,6 @@ export default function TaskFormModal({
 
   useEffect(() => {
     if (task) {
-      /* eslint-disable react-hooks/set-state-in-effect */
       setTitle(task.title || "");
       setDescription(task.description || "");
       setTags(Array.isArray(task.tags) ? task.tags : []);
@@ -61,7 +60,6 @@ export default function TaskFormModal({
         setDueDate(datePart);
         setDueTime(timePart);
       }
-      /* eslint-enable react-hooks/set-state-in-effect */
     }
     onError?.("");
   }, [task, onError]);
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
index d7f3c5b4..bb02620d 100644
--- a/frontend/src/components/ThemeToggle.jsx
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -1,5 +1,6 @@
-import { Moon, Sun } from "lucide-react";
+// eslint-disable-next-line no-unused-vars
 import { motion } from "framer-motion";
+import { Moon, Sun } from "lucide-react";
 import { useTheme } from "../context/ThemeContext";
 
 export default function ThemeToggle() {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5e9c3a2d..01435e79 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 * {
   font-family: 'Outfit', sans-serif;
 }