When using PHP to save a drop down menu selection it remembers the selection but doesnt trigger the onchange event changing the CSS when reloaded

So basically I need to have a PHP cookie I cannot use JavaScript to save the information even though I would like to do so. It saves the selection fine but when reloaded the selection doesnt trigger the onchange which im assuming is the problem. Due to this the CSS doesnt change and it loads into light mode even if dark mode is selected.

Here is my code (PHP/HTML):

<?php
$theme = null;
if (isset($_POST["setc"])) {
    $expire = time() + 60 * 60 * 24 * 30;
    setcookie("mycookie", $_POST["navyOp"], $expire);
    header("location: " . $_SERVER["PHP_SELF"]);
} else if (isset($_COOKIE["mycookie"])) {
    $theme = $_COOKIE["mycookie"];
}
?>

<div class="Button">
        <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
            <select name="navyOp" onchange="test(this);">
                <option selected="selected">Choose a Theme!</option>
                <option value="val1" <?php echo (!is_null($theme) && $theme === "val1" ? " selected" : ""); ?>>Light</option>
                <option value="val2" <?php echo (!is_null($theme) && $theme === "val2" ? " selected" : ""); ?>>Dark</option>
                <input name="setc" value="theme_setting" type="submit">
            </select>
        </form>
    </div>

The JavaScript:

window.test = function(e) {
  if (e.value === 'val1') {
    document.getElementById("container").style.cssText = "background-color: white;";
    document.getElementById("start").style.cssText = "border: 2px solid lightgrey; color: lightgrey; ";
    document.getElementById("choice").style.cssText = "border: 1px solid grey; ";
    document.getElementsByTagName("html").style.cssText = "background-color: white;";
      

  } else if (e.value === 'val2') {
    document.getElementById("container").style.cssText = "background-color: black;";
    document.getElementById("start").style.cssText = "border: 2px solid lightgrey; color: lightgrey; ";
    document.getElementById("choice").style.cssText = "border: 1px solid white;";
    document.getElementsByTagName("html").style.cssText = "background-color: black;";
  }
}

And CSS even though its not necessary:

#container{
    margin: 20px auto;
    background-color: white;
    height: 900px;
    width: 1850px;
    border-radius: 5px;
    box-shadow: 0px 5px 15px 0px;
    position: relative;
}

#start{
    font-size: 1.5em;
    font-weight: bolder;
    word-break: break-all;
    width:100px;
    height:150px;
    border: 2px solid lightgrey;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left:875px;
    top:350px;
    color: grey;
}

html{
    background-color: white;
}

.choice{
    display: inline-block;
    width: 135px;
    text-align: center;
    border: 1px solid grey;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    color: grey;
}

Thank you for your time 🙂