暗模式/亮模式 - 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(e.x, e.y)
});

// 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 可被同源页面访问（https://example.com 与 http://example.com 或 https://m.example.com 不同）