Merge pull request #19 from Vibranium1/dark-mode

Added Dark Mode
GDSC-PHCET · Oct 18, 2023 · 57f191b · 57f191b
2 parents f1de1a0 + aeb48f9
commit 57f191b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -15,11 +15,16 @@
 <body>
   <div id="app">
     <h1>Simple To-Do List</h1>
+    <div id="dark-mode-toggle">
+      <label for="dark-mode-checkbox">Dark Mode</label>
+      <input type="checkbox" id="dark-mode-checkbox">
+    </div>
     <ul class="todo-list" id="todo-list">
     </ul>
     <input type="text" id="new-task" placeholder="New task" class="ToDoSearchBar">
     <button id="add-button">Add Task</button>
   </div>
+
 </body>
 <!-- partial -->
   <script  src="./script.js"></script>

diff --git a/script.js b/script.js
@@ -1,6 +1,13 @@
 const todoList = document.getElementById("todo-list");
 const newTaskInput = document.getElementById("new-task");
 const addButton = document.getElementById("add-button");
+const darkModeToggle = document.getElementById("dark-mode-checkbox");
+
+darkModeToggle.addEventListener("change", toggleDarkMode);
+
+function toggleDarkMode() {
+  document.body.classList.toggle("dark-mode");
+}
 
 addButton.addEventListener("click", addTask);
 
@@ -12,7 +19,7 @@ function addTask() {
     listItem.innerHTML = `
                     <input type="checkbox">
                     <span>${taskText}</span>
-                    <button class="delete-button">Delete</button>
+                    <button class="delete-button" id="del-btn">Delete</button>
                 `;
     todoList.appendChild(listItem);
 

diff --git a/style.css b/style.css
@@ -53,4 +53,36 @@ h1 {
   width: 375px;
   padding: 10px;
   margin: 5px 0;
-}
+}
+
+.dark-mode {
+  background-color: #06071f;
+  color: #fff;
+}
+
+.dark-mode .todo-item {
+  background-color: #10113e;
+  border-color: #0d0e32;
+  color: #fff;
+}
+
+.delete-button {
+  background-color: #f01515;
+  color: #fff;
+  padding: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+#del-btn:hover {
+  background-color: #dd0505;
+}
+
+.dark-mode #add-button {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.dark-mode #add-button:hover {
+  background-color: #0056b3;
+}