时间戳

首页 > 解决方案 > 如何使暗模式在网页中持久化？

javascript - 如何使暗模式在网页中持久化？

问题描述

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

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

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

标签： javascriptdarkmode

解决方案

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

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

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

我知道同步加载不好，但如果是一个小脚本，我认为没问题。

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

推荐阅读