Estoy tratando de crear una funcionalidad de modo oscuro para mi aplicación de Amazon usando el viento de cola. Para eso, he creado una casilla de verificación (botones / control deslizante), por lo que cuando lo enciendo debería cambiar a oscuro o claro según lo que quiero. Estoy Luché con eso durante algunos días y probé diferentes opciones buscando en Youtube y Google. Solo quiero que la sección principal tenga el modo oscuro funcionando, cuando hice clic en el botón marcado, me da nulo en la consola (ver imagen adjunta). Realmente apreciaré toda su ayuda. ¡Gracias de antemano!

github:https://github.com/AyeshaAzam/Amazon-app-with-tailwind-darkmode (aquí puedes ver la demostración en vivo)

 Index.html file: <!-- Toggle dark mode switch begins --> <div class="dk-mode-checkbox flex space-x-2"> <span class="text-sm text-gray-800 dark:text-gray-500">Light</span> <input type="checkbox" id="toggle" checked="checked" class="hidden"> <label for="toggle"> <div class="w-9 h-5 flex items-center bg-gray-300 dark:bg-gray-600 rounded-full p-1 duration-300 ease-in-out dark:bg-gray-600"> <div class="toggle-dot transform hover:translate-x-full w-4 h-4 bg-white rounded-full shadow-md duration-300 ease-in-out"> </div> </div> </label> <span class="text-sm text-gray-400 dark:text-gray-100">Dark</span> </div>

 toggleDarkMode.js file: const checkbox = document.querySelector("#toggle"); console.log("what is in checkbox", checkbox); const html = document.querySelector("html"); console.log("what is in html", html); const toggleDarkMode = function () { checkbox.checked ? html.classList.add("dark") : html.classList.remove("dark"); }; toggleDarkMode(); checkbox.addEventListener("click", toggleDarkMode);