Javascript 重新加载时，暗模式会使白色背景闪烁一毫秒

我正在尝试在我的应用程序中添加此暗模式功能。它使用localstorage存储用户的首选项以备将来使用。所以现在的问题是，当黑暗模式被启用，页面由于某种原因被重新加载，同样的，用户故意重新加载页面，或者提交表单，然后在页面变暗之前，整个页面都会闪烁白色背景。它只停留了几分之一秒。这看起来不专业

还没有找到任何解决办法。所以请帮帮我

另外，下面的代码段在这里不起作用，因为代码包含

localStorage

object

代码如下：

const-toggleSwitch=document.querySelector（“#暗模式按钮输入[type=“checkbox”]”）；
const currentTheme=localStorage.getItem（'theme'）；
如果（当前主题）{
document.documentElement.setAttribute（'data-theme'，currentTheme）；
如果（currentTheme==='dark'）{
toggleSwitch.checked=true；
}
}
功能切换主题（e）{
如果（例如，选中目标）{
document.documentElement.setAttribute（'data-theme'，'dark'）；
setItem（'theme'，'dark'）；
}否则{
document.documentElement.setAttribute（'data-theme'，'light'）；
setItem（'theme'，'light'）；
}    
}
toggleSwitch.addEventListener（'change'，switchTheme，false）
：根目录{
--原色：#495057；
--bg原色：#F5；
}
身体{
背景色：var（--bg原色）；
}
[数据主题=“黑暗”]{
--原色：#8899A6；
--bg原色：#15202B；
}
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
背景色：#fff；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}

暗模式
标题1
标题2
标题3
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
最好在文档的
内放置一个小的
标记来阻止页面呈现。通过这样做，渲染器应该停止调用JavaScript解释器，将
数据主题
属性指定给
，然后在左侧继续。试一试：

将此
放置在
内部-甚至在
或
标记之前：


//渲染块JS：
if（localStorage.theme）document.documentElement.setAttribute（“数据主题”，localStorage.theme）；

然后，右在关闭
标记之前以非渲染阻塞方式使用所有其他脚本：


const-toggleSwitch=document.querySelector（“#暗模式按钮输入[type=“checkbox”]”）；
if（localStorage.theme）{
toggleSwitch.checked=localStorage.theme==“暗”；
}
功能切换主题（e）{
常量主题=e.target.checked？“暗”：“亮”；
document.documentElement.setAttribute（“数据主题”，主题）；
localStorage.theme=主题；
}
toggleSwitch.addEventListener（“更改”，switchTheme）；
这很可能是因为JS尚未加载并执行检查。因此，页面在正常模式下加载，JS初始化，设置暗模式，然后改变。@EmreKoc所说的是正确的。我建议将主题检测脚本作为页面上的第一件事。除此之外，不要在导航上重新加载整个页面-只需用ajax请求替换已更改的部分。伙计们，对不起，请告诉我应该分离代码的哪一部分，以及应该将其放在哪里？移动代码中以渲染阻止方式设置暗光模式的部分-这意味着，在文档的
中。像往常一样，将剩余的脚本放在结束标记的正前方。这样，浏览器将停止解释头部内部的JS，并将所需的
数据主题
属性分配给
标记。@RokoC.Buljan是正确的。但是，考虑你的<代码> QuestS选择器，如果要对脚本的加载进行优先级排序，则可能需要事件委托。