(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 }); }); })();