Come aggiungere colori scuri/chiari o multi-tema solo usando i CSS?

Il tema scuro/chiaro o l'implementazione di funzionalità multi-tema come ciò che offre Twitter è una delle funzionalità di base di ogni applicazione web/mobile di piccole/medie/grandi dimensioni in questi giorni perché la stragrande maggioranza delle persone che utilizzano tali app è molto probabile che abbia preferenze di colore e dovresti sviluppare la tua app in modo da poter soddisfare le loro esigenze al fine di creare una migliore esperienza utente in tutta la tua applicazione, indipendentemente dal Web o dai dispositivi mobili.

TLDR;

Senza ulteriori indugi, iniziamo con l'implementazione di questa funzione all'interno di un'app React, ma notiamo che questa funzione utilizzerà solo funzionalità CSS e manipolazione DOM in modo da poterla utilizzare in qualsiasi framework/libreria o pura applicazione HTML/CSS.

1- Definisci un file CSS/SCSS/Styled-Component/CSS-In-JS globale che controlli e rappresenti le tue direttive di stile globali o il tuo sistema di progettazione.

In quanto sopra, come puoi vedere, ho creato un file di stili globali usando il suffisso SCSS e ho definito una regola radice al suo interno definendo i miei colori e caratteri, root è fondamentalmente lì per aiutarti a centralizzare le tue variabili come colori, dimensioni, caratteri , margini, padding e così via.

2- Crea un componente Tema per gestire la funzionalità del tema di commutazione come di seguito:

import { useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;

La parte più importante qui è impostare un attributo al corpo del tuo documento HTML, ad esempio qui aggiungo un attributo del tema e ne imposto il valore sul valore del mio tema per poterlo indirizzare nel mio file CSS.

Nota: ricorda che questo non esegue nuovamente il rendering dell'intera app in React, ma ciò che stai facendo è la manipolazione del DOM direttamente in un gestore di eventi React, quindi se vuoi accedere al valore del tema nell'intera app usalo nei tuoi componenti che puoi usare un contesto globale e avvolgi la tua app al suo interno per il tuo tema, ma dal momento che distrugge l'unico scopo CSS del nostro lavoro, non lo faremo qui.

3- Aggiungi le variabili del tema scuro e il tema di destinazione in base all'attributo scuro del tuo corpo HTML.

Ora definisci un selettore CSS basato sul tuo attributo body HTML, in questo caso dato che l'ho chiamato "loro" selezionerò [theme="dark"] qui e definirò nuovi colori per le mie variabili.

Facile, non è vero?

4- Multi tema e come vengono modificati i valori delle variabili?

Con l'approccio di cui sopra, puoi utilizzare più valori del tema o persino renderlo dinamico in modo che non solo tu possa avere modalità scure e chiare, puoi creare altri tipi come blu o rosso o ecc.

Fondamentalmente, questo approccio funziona in questo modo, definisci le tue variabili e i colori nel tuo selettore di root, quindi scegli come target il valore del tema del corpo HTML e cambi il colore di quelle stesse variabili che hai definito, i CSS sostituiranno automaticamente i nuovi colori all'interno della tua applicazione .

Bonus: se vuoi mantenere il valore del tema nella tua applicazione, puoi salvarlo nei dati del profilo utente sul tuo database, ma l'approccio più semplice qui è archiviare il valore nella memoria locale.

Imposto l'elemento del tema nella mia memoria locale e ogni volta che la mia app si aggiorna o se chiudo la sessione (scheda) e torno di nuovo, leggo i dati del tema dalla memoria locale.

import { useEffect, useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme) {
      setTheme(currentTheme);
      document.body.setAttribute("theme", currentTheme);
    }
  }, []);

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);
      // Persist the current theme value in localStorage
      localStorage.setItem("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;