still trying to style checkboxes

luasrc/app.js

@@ -31,9 +31,17 @@
     },
     false
   );
+
+  document.addEventListener("DOMContentLoaded", function() {
+    // Move all your code here
+  
+    var mutationObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
         var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
     
         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';
           
@@ -60,5 +68,12 @@
                 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

@@ -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">