Toggle between light/dark mode in Elementor using GSAP

				
					<script>		
    ;(function(){
let chck_if_gsap_loaded = setInterval(function(){
        const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
   if(window.gsap && window.ScrollTrigger && !eleBuilder){
        gsap.registerPlugin(ScrollTrigger);
        light_dark_mode();	
        clearInterval(chck_if_gsap_loaded);
    }
}, 500);

function light_dark_mode(){		

const darkmode = gsap.timeline({paused:true});

const tl = gsap.timeline();

tl.to('body', {backgroundColor: '#000', duration:0.2}); // Body Background color 		
tl.set(".change-logo img", { attr: { src: '' } }, "<"); // change logo	
tl.set(".dm-toggle .elementor-icon i", {className:"+=fa fa-moon"}, "<"); // Change toggle mode icon
tl.set(".dm-toggle .elementor-icon", {color: '#fff', duration:0.2}, "<"); // Change toggle icon color
tl.to(".dm-menu .elementor-menu-toggle", {color: '#fff'}, "<");	// Mobile hamburger icon color 	
tl.to("svg", {fill: '#fff', duration:0.2}, "<"); // Change icon SVG color
tl.to("i", {color: '#fff', duration:0.2}, "<"); // Change icon i color
tl.to(".elementor-button", {backgroundColor: '#fff', duration:0.2}, "<"); // Change button background color		
tl.to(".elementor-button", {borderColor: '#fff', duration:0.2}, "<"); // Change button border color		
tl.to(".elementor-button span", {color: '#000', duration:0.2}, "<"); // Change button text color
tl.to("h1", {color: '#fff'}, "<"); // Change Text color
tl.to("h2", {color: '#fff'}, "<");	
tl.to("h3", {color: '#fff'}, "<");
tl.to("h4", {color: '#fff'}, "<");
tl.to("p", {color: '#fff'}, "<");
tl.set("a", {color: '#fff'}, "<");	
tl.set("span", {color: '#fff'}, "<");	
tl.to("div", {color: '#fff'}, "<");		
        
darkmode.add(tl);
const button = document.querySelector(".dm-toggle");
    
    const currentTheme = localStorage.getItem("theme")
    
         // If no theme preference in local storage, check for browser dark mode
        if (!currentTheme) {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                currentTheme = 'dark';
            } else {
                currentTheme = 'light';
            }
        }

     // Set the theme based on preference
    if(currentTheme === "dark"){
        darkmode.play();
        button.classList.add("darkmode");
    }

   button.addEventListener("click", () => {
     if (!button.classList.contains("darkmode")) {
            // Play Timeline
         darkmode.play();
         button.classList.toggle("darkmode");
         localStorage.setItem("theme", "dark")
         } else {
            // Reverse Timeline
        darkmode.reverse();
     		button.classList.toggle("darkmode");
     		localStorage.setItem("theme", "light")
	}
});
        
}	
        
})();

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>