How to switch a CSS style sheet and maintain its state in Web Storage?

Question

I need to change a whole sheet of CSS style, I’ve done both, one, the main and the other with accessibility (high contrast, larger letters etc.)

<link rel="stylesheet" type="text/css" href="../css/estiloprincipal.css">
<link rel="stylesheet" type="text/css" href="../css/estiloprincipal_acessibilidade.css">

There is a button that allows to enable and disable the "accessibility" mode in the interface that I am creating, the point is that I need to change the sheets and maintain the accessibility status ON or OFF while browsing, ie even changing pages.

How do I change CSS sheets and save the "ON/OFF accessibility" status in Web Storage? (window.localStorage)?

Answer 1

There is a way to do this by checking localStorage exists or does not exist. When you open the page, you check if it exists, that is, it has been created before. If it exists you enter a tag link with the CSS URL stored in it, if not, you do the same thing with the normal CSS URL.

I don’t know how you made the button that switches between the CSS’s, but in the example below I already put a way to manipulate the CSS and the button. In case, the button has a id and a value, where the value="1" means that normal CSS is active, while value="2" means the accessibility CSS is active. But you will put the default HTML button, that is, the normal CSS button, because if the accessibility CSS has been enabled before, the code will automatically change the button values. Then the HTML button would be:

<button value="1" id="botao_acess">OFF</button>

And the JS code:

document.addEventListener("DOMContentLoaded", function(){

   var url1 = "../css/estiloprincipal.css";
   var url2 = "../css/estiloprincipal_acessibilidade.css";
   var botao = document.getElementById("botao_acess");

   var css = localStorage.getItem("css");
   if(!css){
      criaTag(url1);
   }else{
      if(css == url2){
         botao.value = 2;
         botao.textContent = "ON";
      }
      criaTag(css);
   }

   function criaTag(url){
      var estilo = document.createElement("link");
      estilo.rel = "stylesheet";
      estilo.type = "text/css";
      estilo.className = "acess";
      estilo.href = url;
      document.body.appendChild(estilo);
   }

   botao.onclick = function(){

      var tag = document.getElementsByClassName("acess");

      if(this.value == 1){
         this.textContent = "ON";
         this.value = 2;
         tag[0].href = url2;
         localStorage.setItem("css", url2);
      }else{
         this.textContent = "OFF";
         this.value = 1;
         tag[0].href = url1;
         localStorage.setItem("css", url1);
      }

   }

});

Note that when opening the page the code will check whether the localStorage exists in the variable css. If there is no (!css), will create the tag link with the value of url1 (normal CSS URL), otherwise it will create the tag with the URL saved in the localStorage.

However, if the localStorage exists and is equal to url2 (if(css == url2){), the code changes the value and the button text (maybe it is necessary to make some adjustment to this part because I used a button "raw").

In function onclick button (botao.onclick = function(){) the code only changes the href tag link in accordance with the value current and updates the localStorage with the appropriate URL as well as changes the button property by toggling me ON and OFF.