时间戳

首页 > 解决方案 > 暗模式/亮模式 - html,css

javascript - 暗模式/亮模式 - html,css

问题描述

所以我有以下代码：

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但它仍然无法正常工作。有什么建议么？

标签： javascripthtmljquerycssanimation

解决方案

如果您想将整个网站切换到浅色或深色模式，您可以使用 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不同）

推荐阅读