0

I have a function that loads a different CSS file depending on a button click, The function switches the files fine and i`m using localStorage to keep the state for when the page reloads however when i navigate away from the page there is a 0.5 secong flash of the light CSS before switching to the dark version obviously this is only noticable in the Dark mode. I have posted the code below any suggestions on how to get rid of this delay would be appreciated. Thanks

<script>

    function toggleTheme() {
        link = document.getElementById("theme");
        const bulb = document.getElementById('toggle-mdi');
        let previousLink = localStorage.getItem('autosave')
        if (!previousLink) {
            previousLink = "{% static 'css/base.css' %}?v{{ settings.VERSION }}"
        }
        if (previousLink == "{% static 'css/base.css' %}?v{{ settings.VERSION }}") {
            link.setAttribute('href', "{% static 'css/dark.css' %}?v{{ settings.VERSION }}");
            localStorage.setItem("autosave", "{% static 'css/dark.css' %}?v{{ settings.VERSION }}");
            bulb.setAttribute('class', "mdi mdi-lightbulb")
            console.log(localStorage.getItem('autosave'))

        } else {
            link.setAttribute('href', "{% static 'css/base.css' %}?v{{ settings.VERSION }}");
            localStorage.setItem("autosave", "{% static 'css/base.css' %}?v{{ settings.VERSION }}");
            bulb.setAttribute('class', "mdi mdi-lightbulb-on");
            console.log(localStorage.getItem('autosave'))
        }

    };
    
    
    $( document ).ready(() => {
        let mode = localStorage.getItem('autosave')
        let bulb_icon = document.getElementById('toggle-mdi');
        if (!mode) {
            mode = "{% static 'css/base.css' %}?v{{ settings.VERSION }}"
        } else {
            document.getElementById('theme').setAttribute('href', mode)
            console.log(mode)
        }
        if (mode === "{% static 'css/base.css' %}?v{{ settings.VERSION }}") {
            bulb_icon.setAttribute('class', "mdi mdi-lightbulb-on");
        } else if (mode === "{% static 'css/dark.css' %}?v{{ settings.VERSION }}") {
            bulb_icon.setAttribute('class', "mdi mdi-lightbulb");
        }
    });
</script>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Lee_Roberts
  • 1
  • 1
  • 1
    where is this code placed? – LS_ Aug 02 '22 at 15:40
  • @LS_ doesn't matter as it's within `$( document ).ready(() => {` so will always run when the rest of the page has finished. Unwrap it from doc.ready and add the code after the `#theme` element has been created. – freedomn-m Aug 02 '22 at 16:01
  • Does this answer your question ? https://stackoverflow.com/questions/3078584/link-element-onload – Abhay Srivastav Aug 02 '22 at 16:03
  • @AbhaySrivastav no, OPs issue is that they are running js too late in the process, not that they are waiting for a css file to load before continuing. – freedomn-m Aug 02 '22 at 16:22
  • This code is placed at the end of the html and i have tried just as a standalone function rather than in the doc.ready jquery but it is still the same – Lee_Roberts Aug 02 '22 at 16:31
  • rather than jquery could you use prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme or you could use CSS Custom Properties via JavaScript to set the colour ```document.body.style.setProperty("--page-background-color", backgroundColor);``` – Patrick Hume Aug 02 '22 at 22:57
  • Ive solved it now, in the end i refactored the css into one file and used css variables and used a :root and a data-class to differentiate between light and dark styles, works a treat now, thanks for all suggestions. – Lee_Roberts Aug 04 '22 at 06:08

0 Answers0