theme-change Optimization for page load theme-change delay

We must change theme before pageload event to avoid theme changing delay.

Step

if (typeof exports != "undefined") {
    module.exports = {
        themeChange: themeChange
    }
} else {
    var selectedTheme = localStorage.getItem("theme"); // ADD line 1
    if(selectedTheme){ // ADD line 2
        document.documentElement.setAttribute("data-theme",selectedTheme); // // ADD line 3
    } // // ADD line 4
    themeChange(true);
}

Step Add async attribute. And add this element to <head> . It must be first loaded script that no need wait for page load. <script async crossorigin="anonymous" src="./theme-change.js"></script>

Thanks for your library!

Dec 19 '22 22:12 farukcan

Thank you my friend.
I will try this soon.

It's a challenge because on one hand, we don't want to block the page loading by the script, on the other hand, we want to apply the theme before page loading...

Also, many people instead of using a <script> tag, want to install it as a NPM package and import it with React, Vue, etc.

Dec 20 '22 12:12 saadeghi

Thank you all. Following Mr. Farukcan's comment, I temporarily added the following code to the <head> of my index.html. This also avoids delays.

<script async crossorigin="anonymous">
var selectedTheme = localStorage.getItem("theme");
if(selectedTheme) {
    document.documentElement.setAttribute("data-theme", selectedTheme);
}
</script>

Jul 12 '23 08:07 JieyueCoding

hi @JieyueCoding it does not work for me

i mean, it need to be checked from blank tab each, not from already visited website

the glitch is still there

can i see your demo, please?

Jul 12 '23 11:07 jamaluddinrumi