Why the Toggle buttons are flashing on reload?

When i reload my page, my toggle-buttons which are hidded by making opacity-0 appears on flash.

Is there any way to stop these flashes from appearing on reload and keep the (opacity-0) items hidden as intended?
Live Site URL
Codebase-Github Repo

//loads user preference after reload based on user's previous session
window.onload = () => {
  "toggle1" == localStorage.getItem("clicked")
    ? (toggleHide("toggle1"), theme1())
    : "toggle2" == localStorage.getItem("clicked")
    ? (toggleHide("toggle2"), theme2())
    : "toggle3" == localStorage.getItem("clicked")
    ? (toggleHide("toggle3"), theme3())
    : console.log("infinity");
};

Answer

One solution is to make all three themes hidden by default and onload method, you decide which theme you want to show, and by default, if there no clicked item in the localStorage show the first theme, and this will prevent flashing.

window.onload = () => {
  "toggle1" == localStorage.getItem("clicked")
    ? (toggleHide("toggle1"), theme1())
    : "toggle2" == localStorage.getItem("clicked")
    ? (toggleHide("toggle2"), theme2())
    : "toggle3" == localStorage.getItem("clicked")
    ? (toggleHide("toggle3"), theme3())
    : (toggleHide("toggle1"), theme1())
};