How to stop light mode flickering to darker background on page load

问题

So I have a bit of script for toggling between light and dark modes on my site. The dark mode is the default. Problem is, whenever the light mode is toggled on, with every page load it flickers to the dark mode for just a second before loading the light mode. I would really like it to not do this and super appreciate any help you all can give. Thanks in advance!

My Code is as follows:

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

回答1:

Put your JS (the part reading from local storage and applying the class) in the <head> section, and add the class to the <html> tag, so that it get executed before the body is parsed and displayed.

You can try it with this simple 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>

来源：https://stackoverflow.com/questions/62635314/how-to-stop-light-mode-flickering-to-darker-background-on-page-load

标签

javascript

toggle