暗模式/亮模式 - html,css

Question

所以我有以下代码：

 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>

如果您单击任意位置，它会从暗模式切换到亮模式，反之亦然。 我的问题是我应该在我的网站中的哪里包含上述代码的html以便它适用于整个网站，因为现在，每当我点击某个地方时，只有我的主页从暗模式切换到亮模式，反之亦然。 但是我将如何使上述代码适用于整个网站，以及在我的网站中单击的任何位置，整个网站都会从暗模式切换到亮模式，反之亦然。

我尝试在我的网站index.html的head添加代码，但它仍然不起作用。 有什么建议么？

Answer 1

如果您想将整个网站切换到浅色或深色模式，您可以使用 window.localStorage 保存模式设置并将其传递给您网站中用户可能访问的其他页面。

您可以在您网站的每个页面的头部放置一些这样的代码：

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

此代码还将根据您的用户偏好以浅色或深色开始您的页面。

当然，每次用户切换模式时，您都需要更新 localStorage。

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