I'm working on a website that uses the clients localStorage to save the theme. The theme works by using the hue-rotate background filter, on firefox the code seems to work fine, (although the background-filter is invalid in firefox) but in chrome it is inconsistent, when I reload, there seems to be a 50/50 chance that it will display the correct theme.

https://www.redmonster12.repl.co

theme scripts:

var cStore = parseInt(localStorage.getItem("theme"));
var themeID;
if (cStore == 1) {
  themeID = 1;
} else {
  themeID = 0;
}

function invert(change) {
  var element = document.getElementById("pane");
  element.classList.toggle("invert");
  themeID += change;
  localStorage.setItem("theme", themeID % 2);
  console.log(themeID % 2);
}

function theme() {
  if (themeID % 2 == 1) {
    invert(0);
  }
  console.log(themeID % 2);
}

theme();

Button in the HTML:

<button onclick="invert(1)" class="theme"></button>

The element css used to change the theme:

.pane {
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
  backdrop-filter: hue-rotate(180deg);
  transition: 0.5s all ease;
  z-index: -1;
}
.pane.invert {
  opacity: 0;
}