Dark mode in React

di
ilchiuri
il
11 risposte
I
ilchiuri
Pochi posts
Iscritto da
mag, 2025
Messaggi:
14

Dark mode in React

Buongiorno a tutti. Sono nuovo del forum. Volevo chiedervi un parere sulla dark mode. Mi spiego

Volevo creare il pulsante per la dark mode su un semplice sito costruito con React Router. Il sito è molto basic quindi di fatto le cose che vanno cambiate sono semplicemente il background color da bianco a nero e contestualmente con la funzione css filter invert volevo invertire il logo in modo che da bianco e nero passasse a nero bianco.

2 semplici comandi... ora domanda:

Devo per forza usare il contesto quindi creare un contesto per il tema, un hook personalizzato per richiamarlo e tutto quello che ne consegue oppure secondo voi si può creare un semplice componente con un toggle che vada a modificare 2 parametri css maledetti?

Sto provando la seconda opzione ma mi blocco... ho creato il toggle che controllo con lo useState, ma come faccio poi a dargli il comando di modificare il css nel file specifico? Si può fare o mi devo mettere a usare useContext. 

Grazie a tutti.

11 Risposte

  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    Ciao,

    devi fare una cosa di questo tipo ?

    :

  • I
    ilchiuri
    Pochi posts
    Iscritto da
    mag, 2025
    Messaggi:
    14

    Re: Dark mode in React

    Si, esattamente

  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    21/05/2025 - ilchiuri ha scritto:

    Il sito è molto basic quindi di fatto le cose che vanno cambiate sono semplicemente il background color da bianco a nero e contestualmente con la funzione css filter invert

    Se è basico a mio parere non conviene il "Tema"

    21/05/2025 - ilchiuri ha scritto:

    si può creare un semplice componente con un toggle che vada a modificare 2 parametri css maledetti?

    Si, ... crea il componente con la funzione ...
    per esempio background-color e un  filter: invert()   per un logo

    Esempio:

            <header>
          <img
            src="/logo.svg"
            alt="Logo"
            className="logo"
            style={{ filter: darkMode ? 'invert(1)' : 'invert(0)' }}
          />
          <button onClick={toggleDarkMode}>
            {darkMode ? 'Light Mode' : 'Dark Mode'}
          </button>
        </header>

    e in body per esempio :

    .light {
  background-color: white;
  color: black;
}

.dark {
  background-color: black;
  color: white;
}
  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    Ma se vuoi usare Context puoi fare riferimento a questa documentazione:

    Documentazione ufficiale su React Context
    https://react.dev/reference/react/useContext?

  • I
    ilchiuri
    Pochi posts
    Iscritto da
    mag, 2025
    Messaggi:
    14

    Re: Dark mode in React

    Grazie mille!!!! Sembra che funzioni... ho dovuto perp inserire uno useEffect... alla fine è diventato così

    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        if (darkMode) {
            document.body.classList.add("dark");
        } else {
            document.body.classList.remove("dark")
        }
    }, [darkMode])

    function toggleDarkMode() {
       setDarkMode(prevMode => !prevMode);
    }
    
    return (
        <>
            <div id="banner">
                <img id="bannerimg" src={banner} alt="banner uomo di casa"
                style={{ filter: darkMode ? "invert(1)" : "invert(0)"}} ></img>
                <p><strong>Per tutti gli uomini e le donne di casa</strong></p>
            </div>
            <button onClick={toggleDarkMode}>
            {darkMode ? 'Light Mode' : 'Dark Mode'}
          </button>
  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    23/05/2025 - ilchiuri ha scritto:

    Grazie mille!!!! Sembra che funzioni...

    Si si ... va bene !

    Per un esperienza migliore dell'utente, hai già pensato di salvare l'impostazione se dark o white ?
    In questo modo puoi mantenere l'ultima impostazione anche se chiudi e riapri il Browser oppure se fai semplicemente il refresh della pagina.

    Per salvare potresti fare questa cosa con localStorage:

    useEffect(() => {
  const savedTheme = localStorage.getItem('darkMode') === 'true';
  setDarkMode(savedTheme);
}, []);

useEffect(() => {
  localStorage.setItem('darkMode', darkMode);
}, [darkMode]);

    Prova a provare ...   ;-)

  • I
    ilchiuri
    Pochi posts
    Iscritto da
    mag, 2025
    Messaggi:
    14

    Re: Dark mode in React

    Ho cantato vittoria troppo presto...

    Nel senso funziona... ma ho un problema con collegamenti dei link... perchè se imposto a:visited in nero o in bianco in una delle due modalità non si vede se lo lascio blu è proprio brutto nel menu dove cambiano il colore...

    esiste un modo per annullare la proprietà a:visited?

    Oppure devo impostare anche questo colore nelle regole sopra?

  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    23/05/2025 - ilchiuri ha scritto:

    • esiste un modo per annullare la proprietà a:visited?

      Oppure devo impostare anche questo colore nelle regole sopra?

    No,non devi annullare visited  ...  lo devi lasciare 

    Puoi invece fare alcune cose:

    • o applichi la regola anche per visited
      • per Light
        • a {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple; 
}
      • per Dark
        • body.dark a {
  color: lightblue;
}
body.dark a:visited {
  color: lightblue; 
}
    • Oppure se vuoi che non combi:
      • a,
a:visited {
  color: inherit;
}

    Io lo gestirei come gestisci il tema

  • I
    ilchiuri
    Pochi posts
    Iscritto da
    mag, 2025
    Messaggi:
    14

    Re: Dark mode in React

    Grazie mille!!!!! Sei un grande!!! Risolto...

    Approfitto della tua gentilezza... il local storage sembra non funzionare... ma non so se è una questione che sono in sviluppo e il sito non è online... non so come funziona il local storage quando attivo l' npm start da vs code

  • By65Franco
    By65Franco
    Molto attivo
    Iscritto da
    apr, 2023
    Messaggi:
    1477

    Re: Dark mode in React

    23/05/2025 - ilchiuri ha scritto:

    il local storage sembra non funzionare... ma non so se è una questione che sono in sviluppo e il sito non è online

    Ti lascio documentazione su localStorage

    https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
    https://it.javascript.info/localstorage

    Se non ti funziona può dipendere da diverse fattori...

    - funziona anche se sei in sviluppo come se fossi on line

    - assicurati che venga caricato script.js e verifica nel browser (F12) se rilevi errori

    - verifica che non venga caricato troppo presto il localStorage.getItem 

    - potrebbe anche verificarsi che in private o in incognito alcuni browser lo disabilitano

    Comunque deve funzionare anche in fase di sviluppo... fai alcune verifiche.  Qui viene spiegato molto bene https://it.javascript.info/localstorage

  • I
    ilchiuri
    Pochi posts
    Iscritto da
    mag, 2025
    Messaggi:
    14

    Re: Dark mode in React

    Ok. Intanto grazie per il prezioso aiuto. 

Devi accedere o registrarti per scrivere nel forum
11 risposte