如何使暗模式在网页中持久存在？

Question

我已经尝试过通过本地存储持久化，但是当尝试它时它显示出丑陋的用户体验，因为 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

Answer 1

那个flash只是浏览器加载目标页面资源时显示的回退黑屏

尝试使用单页方法。您不会在

中看到类似的闪烁

Answer 2

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

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

如果您想检查用户本身喜欢的配色方案，您可以使用 prefers-color-scheme CSS 媒体查询来执行此操作。

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

这里有效的 link 是：https://persistentdarkmode.infiniti20.repl.co/index.html

如何使暗模式在网页中持久存在？

how to make darkmode persistent in a webpage?

javascript

darkmode