function setTint( tint ) { var label = document.querySelector('.label'); if( tint == "Dark" ) { label.classList.remove("light"); label.classList.add("dark"); label.innerHTML = "Dark"; document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem("tint", "dark"); } else { label.innerHTML = "Light"; label.classList.add("light"); label.classList.remove("dark"); document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem("tint", "light"); } } document.addEventListener('DOMContentLoaded', function() { var panels = document.querySelectorAll('.halfPanel'); console.log("boxes", panels); //#1e2e43 for (var i = 0; i < panels.length; i++) { var currentPanel = panels[i]; currentPanel.addEventListener('click', function() { for (var j = 0; j < panels.length; j++) { panels[j].classList.add("hidePanel"); } //document.body.setAttribute("id", "snow"); }); /* currentPanel.addEventListener('mouseover', function() { var glowingBorder = document.querySelector(".glowingBorder"); var boundingBoxRectangle = this.getBoundingClientRect(); glowingBorder.style.left = (boundingBoxRectangle.x - 2) + "px"; glowingBorder.style.top = ( boundingBoxRectangle.y - 2) + "px"; glowingBorder.style.width = boundingBoxRectangle.width + 4 + "px"; glowingBorder.style.height = boundingBoxRectangle.height + 12 + "px"; //this.classList.add("glowingBorder"); console.log(boundingBoxRectangle); });*/ /* currentPanel.addEventListener('mouseover', function() { if( document.querySelector(".glowingBorder-active") ) { document.querySelector(".glowingBorder-active").classList.remove("glowingBorder-active"); } this.classList.add("glowingBorder-active"); console.log(this); }); currentPanel.addEventListener('mouseout', function() { //this.classList.remove("glowingBorder-active"); });*/ } var smallPanels = document.querySelectorAll('panel.wiggle'); console.log("smallPanels", smallPanels); for (var i = 0; i < smallPanels.length; i++) { var currentPanel = smallPanels[i]; currentPanel.style.transform = "rotate("+ ( -3 + ( Math.random() * 7 )) + "deg)"; } //glowingBorder var checkbox = document.querySelector('.toggle-checkbox'); checkbox.addEventListener('change', function() { if( !this.checked ) { setTint( "Dark" ); } else { setTint( "Light" ); } }); if( localStorage.getItem("tint") == "light" ) { document.documentElement.setAttribute('data-theme', 'light'); document.querySelector(".toggle-checkbox").setAttribute("checked", "checked"); setTint( "Light" ); } else { document.documentElement.setAttribute('data-theme', 'dark'); setTint( "Dark" ); } });