React: come usare la dark-mode e localstorage

Che cosa realizzeremo in questo progetto ?

Realizzeremo una delle funzionalità più diffuse nel web moderno, ovvero la darkmode. Otterremo questo combinando useState useEffect e localStorage

Come si ottiene la Dark Mode in React ?

Il modo più banale per ottenre la darkmode è quello di utilizzare due classi css in cui andare a definire le medesime variabili css ma con tonanlità opposte.

.light-mode {
  --clr-bg: #efefef;
  --clr-text: #222;
  --clr-primary: rgb(56, 146, 194);
  --clr-card: #eeeeee;
}

.dark-mode {
  --clr-bg: #111;
  --clr-text: #d4d3d3;
  --clr-primary: #df372b;
  --clr-card: #272724;
}

Usare lo useState per cambiare modalità

Per prima cosa definiremo uno state in cui tenere traccia della modalità scelta dall'utente, che di default sarà light.

const [theme, setTheme] = useState('light');

2ndo avremo bisogno di definire una funzione per cambiare il nostro tema

  const cambiaTema = () => {
    if (theme === "light-mode") {
      setTheme("dark-mode");
    } else {
      setTheme("light-mode");
    }
  };

Usare lo useEffect per manipolare il Dom

Il terzo passaggio sarà quello di servirsi dello useEffect e manipolare il Dom per cambiare la classe del html tag in base al valore di theme.

 useEffect(() => {
    //Attacca classe al html tag
    document.documentElement.className = theme;
  }, [theme]);

Usare il localStorage

Infine l'ultimo passaggio è di utilizzare il localStorage per permettere ad un utente di ritorno di visualizzare il sito nella stessa modalità con cui lo aveva lasciato l'utlima volta.

Scriverememo nel localStorage nel nostro useEffect

 useEffect(() => {
    document.documentElement.className = theme;

    //inserisco valore di theme nel localStorage ogni volta viene mutato il        suo state
    localStorage.setItem("theme", theme);
  }, [theme]);

E poi andremo a ridefinire la nostra definizione iniziale dello state in modo che se presente il valore nel localStorage, vada a settare quest'ultimo come valore iniziale dello state di theme.

const getFromLocalStorage = () => {
  if (localStorage.getItem("theme")) {
    return localStorage.getItem("theme");
  } else {
    return "light-mode";
  }
};

Usiamo la funzione per settare il nuovo valore.

const [theme, setTheme] = useState(getFromLocalStorage());