如何在页面加载时停止浅色模式闪烁到较暗的背景答案

【问题标题】：How to stop light mode flickering to darker background on page load如何在页面加载时停止浅色模式闪烁到较暗的背景
【发布时间】：2020-10-19 10:48:29
【问题描述】：

所以我有一些脚本可以在我的网站上切换明暗模式。暗模式是默认设置。问题是，每当打开浅色模式时，每次加载页面时，它都会在加载浅色模式之前闪烁到深色模式一秒钟。我真的很希望不要这样做，并且非常感谢大家可以提供的任何帮助。提前致谢！

我的代码如下：

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');
 }
});

【问题讨论】：

标签： javascript toggle

【解决方案1】：

将你的 JS （从本地存储读取并应用类的部分） 放入 <head> 部分，并将类添加到 <html> 标记中，使其在body 被解析并显示出来。

你可以试试这个简单的working demo：

<html>
<head>
  <script>
    // Do this before the body gets parsed
    if (localStorage.getItem('darkmode') === '1') {
      document.documentElement.classList.add('darkmode');
    }
  </script>
  <style>
    .darkmode body { background: #222; }
    .darkmode .light-only { display: none; }
    html:not(.darkmode) .dark-only { display: none; }
  </style>
</head>
<body>
  <button id="darkToggle">
    Switch to
    <span class="dark-only">light</span>
    <span class="light-only">dark</span>
    mode
  </button>

  <script>
    document.querySelector('#darkToggle').addEventListener('click', function() {
      var wasDarkMode = localStorage.getItem('darkmode') === '1';

      localStorage.setItem('darkmode', wasDarkMode ? '0' : '1');
      document.documentElement.classList[wasDarkMode ? 'remove' : 'add']('darkmode');
    });
  </script>
</body>
</html>

【讨论】：