luci-theme-privaterouter/luasrc/app.js

(function () {
    // your page initialization code here
    // the DOM will be available here
  
    const toggler = document.querySelector(".toggler");
    console.log(toggler);
    toggler.addEventListener(
      "click",
      function (e) {
        const element = document.querySelector(".navbar");
        element.classList.toggle("active");
      },
      false
    );
  
    const isDark = localStorage.getItem("isDark");
    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");
  
        const isDark = localStorage.getItem("isDark");
        localStorage.setItem("isDark", isDark == 1 ? 0 : 1);
      },
      false
    );
    var checkboxes = document.querySelectorAll('.cbi-checkbox input[type="checkbox"]');
  
    checkboxes.forEach(function(checkbox) {
        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 });
    });  
  })();