How do you swap webflow's main css to other Github hosted css based on user's machine local time?

I'm trying to use the following script to apply the css to a website depending on user local time:

<script>
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='portfolio-c16909.webflow.a39b8eeda.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/afternoon.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css' type='text/css'>");
      }
}

getStylesheet();
</script>

<noscript><link href="portfolio-c16909.webflow.a39b8eeda.css" rel="stylesheet"></noscript>

Basically, what I'd like to do is to apply a CSS theme based on the user local machine time (e.g. day, afternoon and night type of themes).

Here are my raw css taken from my repo @ GitHub (i know afternoon.css is exactly the same as webflow's main css but that's fine since i'll modify it later. my main point first is to have the script work successfully first).

Thank you very much in advance for your thinking — very much appreciated!

Solution

I would do it the way below. You don't need <noscript> if you use a default style above the script. I'm not sure about your time logic and didn't want to spend too much time on it.

I also added an interval call so that the style changes while someone is on the page and the hour happens to tick over. It only runs every hour so can be fuzzy by about 59 minutes.

<link id="myDynamicStyles" href="portfolio-c16909.webflow.a39b8eeda.css" rel="stylesheet">
<script>
    function changeStyleSheets() {
        const myDynamicStyleTag = document.getElementById('myDynamicStyles');
        const currentTime = new Date().getHours();

        if( currentTime < 5 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css';
        } else if( currentTime < 16 ) {
            myDynamicStyleTag.href = 'portfolio-c16909.webflow.a39b8eeda.css';
        } else if( currentTime < 22 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/afternoon.css';
        } else if( currentTime <= 24 ) {
            myDynamicStyleTag.href = 'https://rawcdn.githack.com/Jacopospina/humansplusmachines/6647fd1cb01b9b756e11d50f88efd72a6e800694/night.css';
        }
    }

    changeStyleSheets();
    setInterval(changeStyleSheets, 1000*60*60); // call this every hour
</script>

<h1>My headline</h1>