I am trying to create dark mode functionality for my Amazon app by using tailwind, For that I have created a checkbox (buttons/slider), so when I toggle on it it should change to dark or Light depending on what i want.I am struggle with it for few days now and have tried different options by searching on Youtube and google. I just want the main section to have darkmode working,when I clicked on the checked button then it gives me null in the console (see attached image). Will really appreciate all you help. Thanks in Advance!

github: https://github.com/AyeshaAzam/Amazon-app-with-tailwind-darkmode ( here you can see the live demo )

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