still trying to style checkboxes

luasrc/app.js

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

luasrc/gaya/gaya.css

@@ -3029,7 +3029,7 @@ strong {
 }
 
 /* The switch - the box around the slider */
-.switch {
+.cbi-checkbox .switch {
   position: relative;
   display: inline-block;
   width: 60px;
@@ -3037,14 +3037,14 @@ strong {
 }
 
 /* Hide default HTML checkbox */
-.switch input { 
+.cbi-checkbox .switch input { 
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 /* The slider */
-.slider {
+.cbi-checkbox .switch .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -3055,7 +3055,7 @@ strong {
   transition: .4s;
 }
 
-.slider:before {
+.cbi-checkbox .switch .slider:before {
   position: absolute;
   content: "";
   height: 26px;
@@ -3066,14 +3066,14 @@ strong {
   transition: .4s;
 }
 
-input:checked + .slider {
+.cbi-checkbox .switch input:checked + .slider {
   background-color: #2196F3;
 }
 
-input:focus + .slider {
+.cbi-checkbox .switch input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
 }
 
-input:checked + .slider:before {
+.cbi-checkbox .switch input:checked + .slider:before {
   transform: translateX(26px);
 }

template/header.htm

@@ -60,22 +60,6 @@
 			<img src="<%=media%>/gaya/icons/arrow.svg" alt="">
 		</label>
 </div>
-	<script>
-		document.addEventListener('DOMContentLoaded', (event) => {
-    let checkboxes = document.querySelectorAll('input[type="checkbox"]');
-    checkboxes.forEach((checkbox) => {
-        let label = document.createElement('label');
-        label.setAttribute('class', 'switch');
-
-        let span = document.createElement('span');
-        span.setAttribute('class', 'slider round');
-
-        checkbox.parentNode.insertBefore(label, checkbox);
-        label.appendChild(checkbox);
-        label.appendChild(span);
-    });
-});
-</script>
 	<div class="fill">
 		<div class="container">