Merge pull request #35 from Manideep711/dark-mode

Added dark mode
Kritika30032002 · Oct 2, 2023 · 5314ba2 · 5314ba2
2 parents 6eb99ec + 9debd8b
commit 5314ba2
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
 							<strong>ToDo List</strong>
 						</font>
 						<img src="images\to-do-list.png" alt="" style="height:70px; margin-bottom:20px;">
+						<input type="checkbox" id="modeToggle">
 					</div>
 				</div>
 			</div>

diff --git a/index.js b/index.js
@@ -24,14 +24,25 @@ window.onload = () => {
 
     form1.addEventListener("submit", addItem);
     items.addEventListener("click", handleItemClick);
-
+    const modeToggleBtn = document.getElementById('modeToggle');
+    modeToggleBtn.addEventListener('click', toggleMode);
     // Add event listener for checkboxes
     const checkboxes = document.querySelectorAll(".form-check-input");
     checkboxes.forEach(checkbox => {
         checkbox.addEventListener("change", markAsComplete);
     });
 };
 
+function toggleMode() {
+    const body = document.body;
+    if (body.classList.contains('light-mode')) {
+        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
+    } else {
+        body.classList.remove('dark-mode');
+        body.classList.add('light-mode');
+    }
+}
 let editItem = null;
 
 function addItem(e) {

diff --git a/style.css b/style.css
@@ -11,7 +11,15 @@ body {
     width: 100%;
     background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
 }
-
+body.light-mode {
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+    color: #fff;
+}
+/* Dark mode styles */
+body.dark-mode {
+    background: #232323; 
+    color: #fff; 
+}
 .container-xl {
     position: relative;
     width: 100%;
@@ -147,3 +155,36 @@ h3 {
 .hidden {
     display: none;
 }
+input[type="checkbox"] {
+    position: relative;
+    width: 80px;
+    height: 40px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: black;
+    outline: none;
+    border-radius: 2rem;
+    cursor: pointer;
+    box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
+  }
+
+  input[type="checkbox"]::before {
+    content: "";
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: 0.5s;
+  }
+
+  input[type="checkbox"]:checked::before {
+    transform: translateX(100%);
+    background: #fff;
+  }
+
+  input[type="checkbox"]:checked {
+    background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
+  }