Multiple theme switcher delay bug on load

Question

I would like to have the theme and the theme css loaded before anything else, ensuring a good preview. Here the JS of the theme

I have a static html site with three different themes inside, thanks to a class assigned to the body of each .html page and the css styles assigned to it.

When I change the theme, for example by assigning the 'grey' theme, the page always loads the 'default' theme for a fraction of the time and then only loads the 'grey' theme when all the page elements are loaded, causing the page to look really ugly.

I would like to have the theme and the theme css loaded before anything else, ensuring a good preview. Here the JS of the theme:

window.onload = function() {
        // Try to read from local storage, otherwise set to default
        let currentTheme = localStorage.getItem("mytheme") || "default";

        setTheme("default", currentTheme);

        const themeSelector = document.getElementById("theme-selector");
        themeSelector.value = currentTheme;

        themeSelector.addEventListener("change", function(e) {
          const newTheme = e.currentTarget.value;
          setTheme(currentTheme, newTheme);
        });

        function setTheme(oldTheme, newTheme) {
          const body = document.getElementsByTagName("body")[0];

          body.classList.remove(oldTheme);
          body.classList.add(newTheme);

          currentTheme = newTheme;

          // Store the new theme in local storage
          localStorage.setItem("mytheme", newTheme);
        }
      };`