title: Dark mode flickers a white background for a millisecond on reload
body: <p>I am trying to add this dark mode feature in my app. It uses localstorage to store the user's preference for future usage. So the problem now is when the dark mode is enabled, and the page is reloaded for some reason, eg. if the user deliberately reloads the page, or submits a form, then there's a flicker of white background all over the page before it turns to be dark. It stays a fraction of a second. It just doesn't look professional.</p>
  <p>Haven't found any solution yet. So please help me out.</p>
  <p>PS. The snippet below won't work here in SO as the code includes <code>localStorage</code> object.</p>
  <p>Here's the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');
  const currentTheme = localStorage.getItem('theme');
  
  if (currentTheme) {
      document.documentElement.setAttribute('data-theme', currentTheme);
      if (currentTheme === 'dark') {
              toggleSwitch.checked = true;
      }
  }
  
  function switchTheme(e) {
      if (e.target.checked) {
          document.documentElement.setAttribute('data-theme', 'dark');
          localStorage.setItem('theme', 'dark');
      }else {        
          document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
      }    
  }
  
  toggleSwitch.addEventListener('change', switchTheme, false);  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --primary-color: #495057;
    --bg-color-primary: #F5F5F5;
  }
  
  body{
    background-color: var(--bg-color-primary); 
  }
  
  [data-theme="dark"] {
    --primary-color: #8899A6;
    --bg-color-primary: #15202B;
  }
  
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dark-mode-button"&gt;
      &lt;input id="chck" type="checkbox"&gt;Dark Mode
      &lt;label for="chck" class="check-trail"&gt;
        &lt;span class="check-handler"&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Header 1&lt;/th&gt;
            &lt;th&gt;Header 2&lt;/th&gt;
            &lt;th&gt;Header 3&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;  
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
          &lt;td&gt;Maria Anders&lt;/td&gt;
          &lt;td&gt;Germany&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;                     
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>