I am trying to make a website that will have a dark and light theme, with a button/buttons to switch between them. I have it working so that the buttons will switch between the themes, and the save either 'dark' or 'light' in local storage, so that the theme will be consistent between pages and page refreshes. I have some javascript that runs when each page is loaded to select the stylesheet:

```js
let defaultStyle = "light.css"
let chosenStyle = sessionStorage.getItem("jugglingSiteTheme");

// Setting Style
chosenStyleLink = document.createElement("link");
chosenStyleLink.rel = "stylesheet";
chosenStyleLink.id = "pagestyle";
    /* If there is a saved theme, use that, else use default */
chosenStyleLink.href = (chosenStyle ? chosenStyle : defaultStyle);
document.head.appendChild(chosenStyleLink);
// Done setting style

```

And a function to swap the stylesheet:

```js
function swapStyle(sheet)
{
    sessionStorage.setItem("jugglingSiteTheme", sheet);
    document.getElementById("pagestyle").setAttribute("href", sheet);
}

```

The problem is, when I reload the page or switch pages, it seems to load the page with default CSS before loading the CSS set by the first code block here. It flashes with the default CSS for just a brief second before loading correctly. Here is the `head` section of my html document where I source the javascript:

```js
<head>
    <title>
        Juggling Club: About Us
    </title>
    <script src="styles.js"></script>
</head>

```

Does anyone know why this is happening and how I can fix it?