如何使暗模式在网页中持久化？答案

【问题标题】：how to make darkmode persistent in a webpage?如何使暗模式在网页中持久化？
【发布时间】：2021-07-26 01:50:24
【问题描述】：

我尝试过通过本地存储进行持久化，但是尝试时显示出丑陋的用户体验，因为每次加载 JavaScript 文件并且每次执行代码，本地存储的功能很难看，怎么能我使一些持久性本地存储在每次加载页面时不会刷新和更新屏幕。

let dark=document.querySelector('.dark-btn');
let body=document.body

dark.addEventListener('click',function(e){
console.log('rahul')
e.preventDefault()
console.log(e)
body.classList.toggle('dark')

e.target.textContent=="dark"?e.target.textContent="light":e.target.textContent="dark";

if(body.classList.contains('dark')){
    localStorage.setItem('darkMode','enabled');
}else{
    localStorage.setItem('darkMode','disabled');
}

})
if(localStorage.getItem('darkMode')=='enabled'){
body.classList.toggle('dark')
// e.target.textContent=="dark"?e.target.textContent="light":e.target.textContent="dark";
dark.textContent="light"
}else{
dark.textContent="dark"
}

这是我的暗模式代码，但我讨厌这个。

您可以查看我制作的网站，这具有切换页面时从黑暗变为白色的效果，反之亦然。 darkmode link

【问题讨论】：

标签： javascript darkmode

【解决方案1】：

您可以在 CSS 文件之后的开头加载同步脚本。检查本地存储，并设置 CSS 变量。它的工作方式是脚本暂停页面的加载，等待它下载。

然后，您的所有组件都可以使用这些 CSS 变量来确定您的配色方案。

如果您想检查用户本身喜欢的配色方案，您可以使用prefers-color-scheme CSS 媒体查询来做到这一点。

我知道同步加载不好，但如果是小脚本，我觉得还可以。

这里的工作链接是：https://persistentdarkmode.infiniti20.repl.co/index.html

【讨论】：

是的，谢谢伙计，但有没有其他方法可以修改脚本，我不想在我的 html 页面中定义任何脚本。
为什么？脚本标签很好。如果没有脚本标签，该方法将无法工作。
您能将此标记为已接受吗？通过单击绿色复选标记。这意味着我的回答有效，并且能够被理解。

【解决方案2】：

那个flash只是浏览器在加载目标页面的资源时显示的后备黑屏。

尝试使用单页方法。你不会看到类似的闪烁

【讨论】：