Javascript 如何在页面加载时阻止灯光模式闪烁到较暗的背景

所以我在我的网站上有一个在明暗模式之间切换的脚本。默认为暗模式。问题是，无论何时打开灯光模式，每次加载页面时，在加载灯光模式之前，它都会闪烁到黑暗模式一秒钟。我真的希望它不要这样做，非常感谢你们能给予的任何帮助。提前谢谢

我的代码如下：

if (localStorage['blackout']) {
 if (Number(localStorage['blackout']) == 1) {
$('BODY').addClass('blackout');
 } else {
  $('BODY').removeClass('blackout');
 }
} else {
  localStorage['blackout'] = 0;
  $('BODY').removeClass('blackout');
}
$('BODY').show();
$('#boToggle').on('click', function(){
  if (Number(localStorage['blackout']) == 0) {
      localStorage['blackout'] = 1;
$('BODY').addClass('blackout');
  } else {
      localStorage['blackout'] = 0;
$('BODY').removeClass('blackout');
 }
});

将JS（从本地存储读取并应用类的部分）放入

部分，并将类添加到

标记中，以便在解析和显示

主体之前执行该类

您可以使用以下简单方法进行尝试：


//在解析主体之前执行此操作
if（localStorage.getItem（'darkmode'）=='1'）{
document.documentElement.classList.add（'darkmode'）；
}
.darkmode主体{背景：#222；}
.darkmode.light only{display:none；}
html:not（.darkmode）.dark only{display:none；}
切换到
光
黑暗的
模式
document.querySelector（“#darkToggle”）.addEventListener（'click'，function（）{
var wasDarkMode=localStorage.getItem（'darkmode'）='1'；
setItem（'darkmode'，wasDarkMode？'0'：'1'）；
document.documentElement.classList[wasDarkMode？'remove'：'add']（'darkmode'）；
});