Estoy trabajando en un sitio web que usa el localStorage de los clientes para guardar el tema. El tema funciona usando el filtro de fondo de rotación de tono, en Firefox el código parece funcionar bien (aunque el filtro de fondo no es válido en Firefox) pero en Chrome es inconsistente, cuando recargo, parece haber un 50/ 50 posibilidades de que muestre el tema correcto.

https://www.redmonster12.repl.co

guiones temáticos:

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

Botón en el HTML:

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

El elemento css usado para cambiar el tema:

 .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; }