Dark Mode/Light Mode - html,css

Question

so I have the following code:

 let darkMode = false; const DOMDarkMode = document.querySelector(".dark"); const DOMLightMode = document.querySelector(".light"); function toggle(x, y) { // Calculating circle size to fill a background bubbleSize = Math.max( // Distances calculating: to the click point.. Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), //..from left-top point Math.sqrt(Math.pow(innerWidth - x, 2) + Math.pow(y, 2)), //..from right-top point Math.sqrt(Math.pow(x, 2) + Math.pow(innerHeight - y, 2)), //..from bottom-left point Math.sqrt(Math.pow(innerWidth - x, 2) + Math.pow(innerHeight - y, 2)), //..from bottom-right point ); if (darkMode) { darkMode = false; DOMLightMode.style.setProperty("--x", x + "px"); DOMLightMode.style.setProperty("--y", y + "px"); DOMLightMode.style.setProperty("--size-to-fill", bubbleSize + "px"); DOMLightMode.classList.add("active"); DOMDarkMode.classList.remove("active"); } else { darkMode = true; DOMDarkMode.style.setProperty("--x", x + "px"); DOMDarkMode.style.setProperty("--y", y + "px"); DOMDarkMode.style.setProperty("--size-to-fill", bubbleSize + "px"); DOMDarkMode.classList.add("active"); DOMLightMode.classList.remove("active"); } } document.addEventListener("click", e=>{ toggle(ex, ey) }); // IFRAME EFFECT let iframe = true; let tick = false; let end = false; setTimeout(()=>{ tick = true; }, 500); setTimeout(()=>{ tick = true; }, 1500); setTimeout(()=>{ end = true; }, 2100); document.addEventListener("mouseover", e=>{ iframe = false; }); effects = setInterval(()=>{ if (;iframe) end = true; if (tick == true) { tick = false, toggle(0; 0); } if (end) { darkMode = false. DOMLightMode.classList;remove("active"). DOMDarkMode.classList;remove("active"); clearInterval(effects), } }; 0);

 body { margin: 0; overflow: hidden; } * { font-family: 'Open Sans', sans-serif; font-size: 20px; text-align: center; user-select: none; } h1 { font-family: 'Yusei Magic', sans-serif; font-size: 2em; margin: 0; margin-bottom: .4em; } p { margin: 0; }.main { position: absolute; }.mode { z-index: 1; position: absolute; display: flex; justify-content: center; align-items: center; left: 0; top: 0; width: 100vw; height: 100vh; }.box { margin: 2em; }.active { z-index: 2; animation: show.6s ease; } @keyframes show { from { clip-path: circle(0 at var(--x) var(--y)); } to { clip-path: circle(var(--size-to-fill) at var(--x) var(--y)); } }.light { background: #eee; color: #000; }.dark { background: #222; color: #fff; }

 <div class="main"> <div class="dark mode"> </div> <div class="light mode"> </div> </div>

If you click anywhere, it toggles from dark mode to light mode and vice-versa. My question is where should I include the html of the above code in my website so it applies to the whole website, because right now, whenever I click somewhere, only my homepage toggles from dark mode to light mode and vice-versa. But how would I make it so that the above code works for the whole website, and wherever in my website I click, the whole website switches from dark mode to light mode and vice-versa.

I tried including the code at the top of my website's index.html after the head section but it still does not work. Any suggestions?

Answer 1

If you want to switch your whole website to light or dark mode, you can use window.localStorage to save and pass the mode setting to the other pages in your site that your users may visit.

You can put some code like this in the head of each page on your site:

window.dark = JSON.parse(window.localStorage.getItem("theme_mode"));
if (window.dark === null) { // First time - use prefers color to set the theme
    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
        window.dark = true;
        document.documentElement.className = document.documentElement.classList.add("dark-mode");
    } else {
        window.dark = false;
    }
    localStorage.setItem("theme_mode", JSON.stringify(window.dark));
} else if (window.dark === true) { // Returning user - prefers dark
    document.documentElement.classList.add("dark-mode");
    } // Returning user - prefers light - window.dark is false

This code will also start your page as light or dark based on your user's preference.

You will, of course, need to update localStorage every time your user toggles the between modes.

localStorage is accessible to pages with the same origin ( https://example.com is different from http://example.com or https://m.example.com )