Dark mode flickers a white background for a millisecond on reload

by

It would be ideal to block the page rendering by placing a small <script> tag inside the <head> of your Document. By doing so the renderer should stop to call the JavaScript interpreter, assign the data-theme attribute to <html> and than continue where left. Give it a try:

Place this <script> inside <head> – even before the <link> or <style> tags:

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

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

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

Than, right before the closing </body> tag use all the other scripts in a non-render-blocking manner:


<!-- 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 -->

More Related Contents:

  1. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  2. How to force browser to show image 3 inches wide?
  3. Syntax Higlighter For Site [closed]
  4. How do you inject this code into HTML using Javascript?
  5. fixing slider on my website [closed]
  6. Full-screen iframe with a height of 100%
  7. How To Get Font Size in HTML
  8. Cache busting via params
  9. Remove CSS class from element with JavaScript (no jQuery) [duplicate]
  10. How to update placeholder color using Javascript?
  11. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  12. execCommand() is now obsolete, what’s the alternative?
  13. How to create a custom scrollbar on a div (Facebook style)
  14. Have a div cling to top of screen if scrolled down past it [duplicate]
  15. HTML book-like pagination
  16. Passing mouse clicks through an overlaying element
  17. Highcharts – issue about full chart width
  18. Fill available spaces between labels with dots or hyphens
  19. How do you float elements without a vertical gap?
  20. Trigger CSS Animations in JavaScript
  21. Dynamically change the size of the font size based on text length
  22. Why does querySelector only select the first element and how can I fix this?
  23. Detect browser wrapped lines via javascript
  24. Multiple read more / read less sections are not working on a page
  25. Extracting text from a contentEditable div
  26. How to remove jQuery Mobile styling?
  27. Wrapping lists into columns
  28. How do I dynamically adjust css stylesheet based on browser width?
  29. How do I put a clear button inside my HTML text input box like the iPhone does?
  30. Possible to reverse a css animation on class removal?

Leave a Comment