I DID IT

luasrc/app.js

@@ -1,79 +1,35 @@
 (function () {
-  // your page initialization code here
+    // your page initialization code here
-  // the DOM will be available here
+    // the DOM will be available here
-
+  
-  const toggler = document.querySelector(".toggler");
+    const toggler = document.querySelector(".toggler");
-  console.log(toggler);
+    console.log(toggler);
-  toggler.addEventListener(
+    toggler.addEventListener(
-    "click",
+      "click",
-    function (e) {
+      function (e) {
-      const element = document.querySelector(".navbar");
+        const element = document.querySelector(".navbar");
-      element.classList.toggle("active");
+        element.classList.toggle("active");
-    },
+      },
-    false
+      false
-  );
+    );
-
+  
-  const isDark = localStorage.getItem("isDark");
+    const isDark = localStorage.getItem("isDark");
-  if (isDark == 1) {
+    if (isDark == 1) {
-    const element = document.querySelector("body");
-    element.classList.add("dark");
-  }
-  const themetoggler = document.querySelector(".themetoggler");
-  themetoggler.addEventListener(
-    "click",
-    function (e) {
-      e.preventDefault();
       const element = document.querySelector("body");
-      element.classList.toggle("dark");
+      element.classList.add("dark");
-
+    }
-      const isDark = localStorage.getItem("isDark");
+    const themetoggler = document.querySelector(".themetoggler");
-      localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
+    themetoggler.addEventListener(
-    },
+      "click",
-    false
+      function (e) {
-  );
+        e.preventDefault();
-
+        const element = document.querySelector("body");
-  document.addEventListener("DOMContentLoaded", function() {
+        element.classList.toggle("dark");
-    // Move all your code here
   
-    var mutationObserver = new MutationObserver(function(mutations) {
+        const isDark = localStorage.getItem("isDark");
-      mutations.forEach(function(mutation) {
+        localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
-        var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
+      },
-    
+      false
-        checkboxes.forEach(function(checkbox) {
+    );
-          // Check if toggle switch is already created
+  })();
-          if (!checkbox.nextSibling || checkbox.nextSibling.className !== 'switch') {
+  
-            var switchElement = document.createElement('label');
-            switchElement.className = 'switch';
-          
-            var input = document.createElement('input');
-            input.type = 'checkbox';
-            input.checked = checkbox.checked;
-            switchElement.appendChild(input);
-          
-            var slider = document.createElement('span');
-            slider.className = 'slider';
-            switchElement.appendChild(slider);
-          
-            // Add the switch to the div wrapping the checkbox
-            checkbox.parentNode.insertBefore(switchElement, checkbox);
-          
-            // Hide the original checkbox
-            checkbox.style.display = 'none';
-          
-            input.addEventListener('change', function() {
-                checkbox.checked = this.checked;
-            });
-          
-            var observer = new MutationObserver(function() {
-                input.checked = checkbox.checked;
-            });
-            observer.observe(checkbox, { attributes: true });
-          }
-        });
-      });
-    });
-    
-    mutationObserver.observe(document.documentElement, { childList: true, subtree: true });
-  });
-
-})(); // Make sure to include this closing partz

luasrc/gaya/gaya.css

@@ -3028,52 +3028,51 @@ strong {
   }
 }
 
-/* The switch - the box around the slider */
+.cbi-checkbox {
-.cbi-checkbox .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
+  width: 40px; /* Decreased from 75px */
-  height: 34px;
+  height: 20px; /* Decreased from 25px */
+  border-radius: 20px; /* Optional: added for rounded corners */
 }
 
-/* Hide default HTML checkbox */
+.cbi-checkbox input[type="checkbox"] {
-.cbi-checkbox .switch input { 
+  position: absolute;
-  opacity: 0;
+  width: 100%;
-  width: 0;
+  height: 100%;
-  height: 0;
+  z-index: 2;
+  opacity: 0; /* Make it invisible but still clickable */
+  cursor: pointer;
 }
 
-/* The slider */
+.cbi-checkbox label {
-.cbi-checkbox .switch .slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #ccc;
+  background-color: #bbb;
-  transition: .4s;
+  transition: background-color .4s;
+  border-radius: 20px; /* Make the background rounded */
 }
 
-.cbi-checkbox .switch .slider:before {
+.cbi-checkbox label::after {
-  position: absolute;
   content: "";
-  height: 26px;
+  position: absolute;
-  width: 26px;
+  top: 1px; /* Adjusted to match the new height */
-  left: 4px;
+  left: 1px; /* Adjusted to match the new width */
-  bottom: 4px;
+  width: 18px; /* Decreased to fit the new dimensions */
-  background-color: white;
+  height: 18px; /* Decreased to fit the new dimensions */
-  transition: .4s;
+  background-color: #fff;
+  transition: left .4s;
+  border-radius: 50%; /* Ensures the slider stays circular */
 }
 
-.cbi-checkbox .switch input:checked + .slider {
+.cbi-checkbox input[type="checkbox"]:checked + label {
-  background-color: #2196F3;
+  background-color: #77C2BB;
 }
 
-.cbi-checkbox .switch input:focus + .slider {
+.cbi-checkbox input[type="checkbox"]:checked + label::after {
-  box-shadow: 0 0 1px #2196F3;
+  left: 20px; /* Adjusted to new width */
+  background-color: #009688;
 }
-
-.cbi-checkbox .switch input:checked + .slider:before {
-  transform: translateX(26px);
-}