Javascript 暗模式/亮模式-html、css

因此，我有以下代码：

设darkMode=false；
const DOMDarkMode=document.querySelector（“.dark”）；
const DOMLightMode=document.querySelector（“.light”）；
功能切换（x，y）{
//计算圆大小以填充背景
泡泡大小=Math.max(
//距离计算：到单击点的距离。。
sqrt（Math.pow（x，2）+Math.pow（y，2）），/…从左上角开始
sqrt（Math.pow（innerWidth-x，2）+Math.pow（y，2）），/…从右上角开始
sqrt（Math.pow（x，2）+Math.pow（innerHeight-y，2）），/…从左下角开始
sqrt（Math.pow（innerWidth-x，2）+Math.pow（innerHeight-y，2）），/…从右下角开始
);
if（暗模式）{
暗模式=假；
DOMLightMode.style.setProperty（“--x”，x+“px”）；
DOMLightMode.style.setProperty（“--y”，y+“px”）；
DOMLightMode.style.setProperty（“--size to fill”，bubbleSize+“px”）；
DOMLightMode.classList.add（“活动”）；
DOMDarkMode.classList.remove（“活动”）；
}否则{
暗模式=真；
DOMDarkMode.style.setProperty（“--x”，x+“px”）；
DOMDarkMode.style.setProperty（“--y”，y+“px”）；
DOMDarkMode.style.setProperty（“--size to fill”，bubbleSize+“px”）；
DOMDarkMode.classList.add（“活动”）；
DOMLightMode.classList.remove（“活动”）；
}
}
document.addEventListener（“单击”，e=>{
切换（e.x，e.y）
});
//IFRAME效应
让iframe=true；
让勾号=假；
让结束=错误；
setTimeout（（）=>{tick=true；}，500）；
setTimeout（（）=>{tick=true；}，1500）；
setTimeout（（）=>{end=true；}，2100）；
addEventListener（“mouseover”，e=>{iframe=false；}）；
效果=设置间隔（（）=>{
if（！iframe）
结束=真；
如果（勾选==真）{
勾选=假；
切换（0,0）；
}
若(完){
暗模式=假；
DOMLightMode.classList.remove（“活动”）；
DOMDarkMode.classList.remove（“活动”）；
清除间隔（效果）；
}
}, 0);
正文{
保证金：0；
溢出：隐藏；
}
* {
字体系列：“开放式Sans”，无衬线；
字体大小：20px；
文本对齐：居中；
用户选择：无；
}
h1{
字体系列：“Yusei Magic”，无衬线；
字号：2em；
保证金：0；
边缘底部：.4em；
}
p{
保证金：0；
}
梅因先生{
位置：绝对位置；
}
.模式{
z指数：1；
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
左：0；
排名：0；
宽度：100vw；
高度：100vh；
}
.盒子{
边缘：2米；
}
.主动{
z指数：2；
动画：表演。6秒轻松；
}
@关键帧显示{
从{
剪辑路径：圆（0在var（--x）var（--y））；
}
到{
剪辑路径：在var（--x）var（--y）处的圆（var（--size to fill）；
}
}
.光{
背景：#eee；
颜色：#000；
}
.黑暗{
背景：#222；
颜色：#fff；
}
如果要将整个网站切换到亮模式或暗模式，可以使用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

本地存储可供具有相同来源（不同于或）的页面访问