0

I have a day and night toggle button on my site that I created using Tailwind CSS and Daisyui. But when this html and js code runs, my site opens in night mode by default. How can I fix this?

HTML Code of Theme Change Button:

              <button aria-label="Dark Mode" id="dark" class="btn btn-ghost">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"></path></svg>
              </button>
              <button aria-label="Light Mode" id="light" class="btn btn-ghost hidden">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path></svg>
              </button>

JS

const c="light",l="dark",t=document.getElementById("dark"),a=document.getElementById("light"),e=document.documentElement,d=()=>{t.classList.add("hidden"),a.classList.remove("hidden"),e.classList.add("dark"),localStorage.setItem("theme","dark"),e.setAttribute("data-theme",l)},s=()=>{t.classList.remove("hidden"),a.classList.add("hidden"),e.classList.remove("dark"),localStorage.setItem("theme","light"),e.setAttribute("data-theme",c)},m=()=>{t.addEventListener("click",()=>{d()}),a.addEventListener("click",()=>{s()}),localStorage.getItem("theme")==="dark"||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?d():s()};m();

I want it to have day mode by default.

Batuhan Barutcu
  • 11
  • What have you tried? The JS code you posted appears to set the default as dark. Where is you attempt to set the default to light? Please edit your question and include that code, and explain at what point in that code you aren't getting the result you expect. Also, it would be helpful to actually format your code and not post it as one long line. – devlin carnate Aug 02 '23 at 20:45
  • You should debug that JS. It looks like you have localstorage storing theme modes (and using them), and also `prefers-color-scheme: dark` in there too which checks your OS theme and switches the site to the corresponding theme. If you don't know what they are [you can](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) look [them up](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) in the documentation – Andy Aug 02 '23 at 20:47

0 Answers0