From aeb48f9746ed3b36c462bc90af77d236db97f0a9 Mon Sep 17 00:00:00 2001 From: Rajdeep Sharma Date: Mon, 16 Oct 2023 19:24:14 +0530 Subject: [PATCH] Added Dark Mode --- index.html | 5 +++++ script.js | 9 ++++++++- style.css | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 92625f4..55b47cd 100644 --- a/index.html +++ b/index.html @@ -15,11 +15,16 @@

Simple To-Do List

+
+ + +
+ diff --git a/script.js b/script.js index f54685c..6882eb9 100644 --- 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 = ` ${taskText} - + `; todoList.appendChild(listItem); diff --git a/style.css b/style.css index a3a4b07..bca0fac 100644 --- a/style.css +++ b/style.css @@ -53,4 +53,36 @@ h1 { width: 375px; padding: 10px; margin: 5px 0; -} \ No newline at end of file +} + +.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; +}