JIYAJAIN30 · disha-1302 · May 14, 2026 · May 14, 2026
diff --git a/index.html b/index.html
@@ -6,6 +6,9 @@
 </head>
 <body>
 
+    <!-- Dark Mode Toggle Button -->
+    <button id="theme-toggle">🌙</button>
+
     <div class="container">
         <h1>📚 Productivity Tracker</h1>
 

diff --git a/script.js b/script.js
@@ -1,5 +1,29 @@
 let tasks = [];
 
+// 🌙 Dark Mode Toggle
+const themeToggle = document.getElementById("theme-toggle");
+
+themeToggle.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+
+    // Save theme preference
+    if (document.body.classList.contains("dark-mode")) {
+        localStorage.setItem("theme", "dark");
+    } else {
+        localStorage.setItem("theme", "light");
+    }
+});
+
+// Load saved theme on refresh
+window.addEventListener("load", () => {
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark") {
+        document.body.classList.add("dark-mode");
+    }
+});
+
+
 // ➤ Add Task
 function addTask() {
     let input = document.getElementById("taskInput");
@@ -21,8 +45,10 @@ function renderTasks() {
         let li = document.createElement("li");
 
         li.innerHTML = `
-            ${task.text}
+            <span>${task.text}</span>
+
             <button onclick="toggleTask(${index})">✔</button>
+            <button onclick="editTask(${index})">✏️</button>
             <button onclick="deleteTask(${index})">❌</button>
         `;
 
@@ -43,6 +69,22 @@ function toggleTask(index) {
     renderTasks();
 }
 
+// ➤ Edit Task
+function editTask(index) {
+
+    let newText = prompt("Edit your task:", tasks[index].text);
+
+    if (newText === null) return;
+
+    newText = newText.trim();
+
+    if (newText === "") return;
+
+    tasks[index].text = newText;
+
+    renderTasks();
+}
+
 // ➤ Delete Task
 function deleteTask(index) {
     tasks.splice(index, 1);
@@ -66,14 +108,13 @@ function updateProgress() {
         `Progress: ${percent}% (${doneTasks}/${total} tasks completed)`;
 }
 
-
 
 // ⏱️ Timer
 let seconds = 0;
 let timer = null;
 
 function startTimer() {
-    if (timer !== null) return; // prevent multiple timers
+    if (timer !== null) return;
 
     timer = setInterval(() => {
         seconds++;

diff --git a/style.css b/style.css
@@ -1,21 +1,52 @@
+:root {
+    --bg-color: #f4f4f4;
+    --container-color: white;
+    --text-color: black;
+    --task-bg: #eee;
+}
+
+body.dark-mode {
+    --bg-color: #222;
+    --container-color: #333;
+    --text-color: white;
+    --task-bg: #444;
+}
+
 body {
     font-family: Arial;
-    background: #f4f4f4;
+    background: var(--bg-color);
+    color: var(--text-color);
     text-align: center;
+    transition: 0.3s;
+}
+
+/* 🌙 Theme Toggle Button */
+#theme-toggle {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    padding: 10px;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 18px;
 }
 
 .container {
     width: 300px;
     margin: auto;
     margin-top: 50px;
-    background: white;
+    background: var(--container-color);
     padding: 20px;
     border-radius: 10px;
+    transition: 0.3s;
 }
 
 input {
     padding: 8px;
     width: 70%;
+    background: white;
+    color: black;
 }
 
 button {
@@ -24,10 +55,20 @@ button {
     cursor: pointer;
 }
 
+/* ✅ Improved Task Styling */
 li {
     list-style: none;
     margin: 10px 0;
-    background: #eee;
-    padding: 5px;
+    background: var(--task-bg);
+    padding: 10px;
     border-radius: 5px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* ✅ Task Buttons Alignment */
+li button {
+    margin-left: 5px;
 }