title: Using tailwind css for darkmode
body: <p>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!</p>
  <p>github: <a href="https://github.com/AyeshaAzam/Amazon-app-with-tailwind-darkmode" rel="nofollow noreferrer">https://github.com/AyeshaAzam/Amazon-app-with-tailwind-darkmode</a> ( here you can see the live demo )</p>
  <pre><code>Index.html file:
  &lt;!-- Toggle dark mode switch begins --&gt;
              &lt;div class=&quot;dk-mode-checkbox flex  space-x-2&quot;&gt;
                &lt;span class=&quot;text-sm text-gray-800  dark:text-gray-500&quot;&gt;Light&lt;/span&gt;
                &lt;input type=&quot;checkbox&quot; id=&quot;toggle&quot; checked=&quot;checked&quot; class=&quot;hidden&quot;&gt;
                &lt;label for=&quot;toggle&quot;&gt;
                  &lt;div
                    class=&quot;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&quot;&gt;
                    &lt;div
                      class=&quot;toggle-dot transform  hover:translate-x-full  w-4 h-4 bg-white rounded-full shadow-md  duration-300 ease-in-out&quot;&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/label&gt;
                &lt;span class=&quot;text-sm text-gray-400 dark:text-gray-100&quot;&gt;Dark&lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  <pre><code>toggleDarkMode.js file:
  
  const checkbox = document.querySelector(&quot;#toggle&quot;);
  console.log(&quot;what is in checkbox&quot;, checkbox);
  const html = document.querySelector(&quot;html&quot;);
  console.log(&quot;what is in html&quot;, html);
  
  const toggleDarkMode = function () {
    checkbox.checked ? html.classList.add(&quot;dark&quot;) : html.classList.remove(&quot;dark&quot;);
  };
  
  toggleDarkMode();
  checkbox.addEventListener(&quot;click&quot;, toggleDarkMode);
  </code></pre>
  <p><a href="https://i.stack.imgur.com/xPTxP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xPTxP.png" alt="enter image description here" /></a></p>