Added Dark Mode Toggler.

index.html

@@ -17,6 +17,13 @@
       <div class="upper-box">
         <div class="upper-box-inital">
       <header>IP Address Tracker</header>
+
+      <!-- Dark Mode Toggler -->
+      <label class="switch">
+        <input type="checkbox" id="darkModeToggle">
+        <span class="slider round"></span>
+      </label>
+
       <form>
         <input
           type="text"

scripts.js

@@ -74,10 +74,11 @@ const fetchIPdata = function () {
     .then((result) => {
       renderData(result);
       leafed(result);
-    }).catch((error) => {
+    })
+    .catch((error) => {
       console.error(error); // Log the error for debugging
       showToast(error.message);
-    });;
+    });
 };
 const renderData = function (result) {
   ipAddressElement.innerText = result.ip;
@@ -102,3 +103,11 @@ const leafed = function (result) {
   }).addTo(map);
   marker.bindPopup("<b>You are Here!").openPopup();
 };
+
+// Function to toggle the dark mode
+const toggleDarkMode = () => {
+  var element = document.getElementById("darkModeToggle");
+  element.addEventListener("change", () => {
+    document.body.classList.toggle("dark-mode");
+  });
+};

styles.css

@@ -15,6 +15,12 @@ body {
   margin: 0%;
   padding: 0%;
 }
+
+.dark-mode {
+  background-color: black;
+  color: white;
+}
+
 header {
   font-size: 36px;
   font-weight: bold;
@@ -145,3 +151,82 @@ input[type="submit"]:hover {
     max-width: 50%;
   }
 }
+
+/* Container for Dark Mode Toggler */
+.switch {
+  position: absolute;
+  display: inline-block;
+  top: 10px;
+  right: 40px; 
+  /* Change Height and width of the container here */
+  width: 100px;
+  height: 50px;
+}
+
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #eee;
+  transition: 0.4s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 50px;
+  width: 56px;
+  left: 6px;
+  background-image: url('./images/sun.svg');
+  background-repeat: no-repeat;
+  transition: 0.4s;
+  border-radius: 16px;
+}
+
+
+input:checked + .slider::before {
+  transform: translateX(40px);
+  background-image: url('./images/moon.svg');
+  width: 50px;
+  height: 45px;
+  bottom: 3px;
+}
+
+input:checked + .slider {
+  background-color: black;
+}
+
+/* Made the slider responsive */
+@media (max-width: 600px) {
+  .switch {
+    top: 24px;
+    right: 10px;
+    width: 50px;
+    height: 30px;
+  }
+
+  .slider:before {
+    width: 30px;
+    height: 30px;
+    left: 2px;
+  }
+
+  input:checked + .slider::before {
+    transform: translateX(20px);
+    background-image: url('./images/moon.svg');
+    width: 40px;
+    height: 25px;
+    bottom: 3px;
+  }
+}