Why the Toggle buttons are flashing on reload?-CodePudding

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");
};

CodePudding user response：

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())
};