Der dunkle Modus lässt beim Neuladen für eine Millisekunde einen weißen Hintergrund flackern

Question 1

Ich versuche, diese Dunkelmodus-Funktion in meine App einzufügen. Es verwendet localstorage, um die Präferenz des Benutzers für die zukünftige Verwendung zu speichern. Das Problem ist jetzt also, wenn der Dunkelmodus aktiviert ist und die Seite aus irgendeinem Grund neu geladen wird, z. Wenn der Benutzer die Seite absichtlich neu lädt oder ein Formular absendet, flackert auf der gesamten Seite ein weißer Hintergrund, bevor er dunkel wird. Es bleibt ein Bruchteil einer Sekunde. Es sieht einfach nicht professionell aus.

Habe noch keine Lösung gefunden. Also bitte helft mir.

PS. Das folgende Snippet funktioniert hier in SO nicht, da der Code enthält localStorage Objekt.

Hier ist der 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);

: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;
}

<div id="dark-mode-button">
    <input id="chck" type="checkbox">Dark Mode
    <label for="chck" class="check-trail">
      <span class="check-handler"></span>
    </label>
</div>

<table class="table">
    <thead>
      <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
      </tr>
    </thead>  
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
    </tbody>                     
</table>

Question 2

Ideal wäre es Blockieren Sie die Seitenwiedergabe durch Platzieren eines kleinen <script> Tag innerhalb der <head> Ihres Dokuments. Dadurch sollte der Renderer aufhören, den JavaScript-Interpreter aufzurufen, der zuweisen data-theme zuschreiben <html> und dann weiter wo links. Versuche es:

Platzieren Sie dies <script> Innerhalb <head> – noch vor dem <link> oder <style> Stichworte:

<head>
  <!-- meta, title etc... -->

  <script>
  // Render blocking JS:
  if (localStorage.theme) document.documentElement.setAttribute("data-theme", localStorage.theme);
  </script>

  <!-- link, style, etc... -->
</head>

Dann, richtig vor der Schließung </body> Schild Verwenden Sie alle anderen Skripts in einer nicht renderblockierenden Weise:


<!-- other <script> tags here -->

<script>
const toggleSwitch = document.querySelector('#dark-mode-button input[type="checkbox"]');

if (localStorage.theme) {
  toggleSwitch.checked = localStorage.theme === "dark";
}

function switchTheme(e) {
  const theme = e.target.checked ? "dark" : "light";
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.theme = theme;
}

toggleSwitch.addEventListener("change", switchTheme);
</script>

    
<!-- Closing </body> goes here -->