EN IT
Home Chi sono Learn Blog

Toggle light/dark persistente in Webflow (GSAP)

Avanzato 30:53 webflowgsapdark-modevariabilijavascript

Costruisci un toggle light/dark persistente in Webflow con variable modes, un class toggle GSAP, transizioni di colore fluide e localStorage che sopravvive ai reload.

Guarda su YouTube

Punti chiave

  • Un intero cambio di tema può ridursi al toggle di una sola classe — se investi in anticipo: definisci i colori come variabili e aggiungi un variable mode manuale "dark mode" che li sovrascrive.
  • La set action di GSAP (non animate) inverte quella classe all'istante — set assegna un valore senza durata né easing, esattamente ciò che serve per cambiare tema.
  • Non mettere transizioni CSS su ogni elemento colorato — litigerebbero con le altre animazioni GSAP. Chiudile dietro una classe temporanea theme-transition aggiunta all'inizio del toggle e rimossa alla fine.
  • La persistenza richiede un po' di JavaScript: salva la scelta in localStorage al click, e rileggila nel <head> prima del paint (rispettando anche prefers-color-scheme) così non c'è flash.
  • Applica la classe del tema a <html>, non a <body> — html esiste prima che il body venga renderizzato, così la classe arriva prima del primo paint e il flicker non capita mai.

Capitoli del video

  1. 00:00 Intro
  2. 01:28 Definire light e dark mode con variabili e variable modes
  3. 07:03 Implementare il pulsante di toggle
  4. 09:32 Implementare l'interazione di switch light/dark
  5. 18:58 Usare il CSS per una transizione di colore fluida
  6. 21:21 Integrare la transizione fluida nell'interazione GSAP
  7. 24:41 Usare JavaScript per uno switch di tema persistente
  8. 29:34 Outro

Un buon toggle light/dark in Webflow non è una singola feature — è un piccolo sistema: una palette costruita su variabili, un’interazione GSAP che inverte una singola classe, una transizione di colore fluida che non sabota le altre animazioni, e un tocco di JavaScript perché la scelta sopravviva a reload e cambi di pagina. Costruiscilo una volta, nel modo giusto, e potrai metterlo in qualsiasi progetto.

Il vantaggio di fare il lavoro preparatorio è quasi magico: un intero cambio di tema si riduce al toggle di una sola classe. Questa lezione è anche un’ottima occasione per vedere la action set di GSAP — la cugina istantanea e senza durata di animate — e come dialoga con i variable modes di Webflow.

Come funziona

Variabili e variable modes sono le fondamenta. Metti ogni colore che il tema deve toccare in una collezione di variabili (raggruppati, es. sfondi e font). Il base mode di default è il tuo tema chiaro; aggiungi un secondo variable mode manuale chiamato dark mode e sovrascrivi lì i valori. Poi collega quelle variabili a tutto ciò che usa colore — parti dal tag Body (All Pages) per font e sfondo (la maggior parte degli elementi eredita da lì), poi classi e stati specifici dove serve. Fatto questo, applicare una classe dark-mode che porta il variable mode scuro inverte l’intera palette all’istante.

La set action di GSAP inverte la classe. Il toggle usa due interazioni, entrambe con control toggle play/reverse (così ogni click inverte): una anima il piccolo knob dello switch lungo il binario, l’altra usa una action set sulla classe. Set è diversa da animate — invece della sezione “animated properties” ha set properties, e sotto un’opzione class con add / remove / toggle. Fare toggle della classe dark-mode è l’intero cambio di tema. (Set gira sulla pagina in cui l’hai costruita — ricorda di impostare runs on: all pages così un toggle copiato funziona ovunque, e tieni la classe dark-mode attaccata a qualcosa nello style guide così Webflow non la elimina come inutilizzata.)

Ammorbidire il cambio senza rompere tutto. Di default il tema si inverte all’istante. Potresti aggiungere transizioni CSS a ogni elemento colorato, ma è poco pratico e peggio — quelle transizioni si scontrerebbero con qualsiasi animazione GSAP di scroll/hover che tocca le stesse proprietà. La mossa più intelligente è una classe theme-transition definita in CSS custom nell’head che applica transizioni di colore a tutti gli elementi solo mentre è presente:

<!-- Site Settings → Custom Code → Head -->
<style>
  .theme-transition,
  .theme-transition *,
  .theme-transition *::before,
  .theme-transition *::after {
    transition:
      color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      outline-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
</style>

Nell’interazione dello switch, set la classe theme-transition a 0s e set via a 0.8s. Ora i colori sfumano su 800ms durante lo switch, e la transizione sparisce il resto del tempo così non interferisce mai con nient’altro.

La persistenza richiede JavaScript — e qui torna, nello spirito, il fix del flicker della lezione 2. Due piccoli script in Site Settings: uno nell’head che gira prima del paint, legge il tema salvato da localStorage (con fallback al prefers-color-scheme di sistema) e applica la classe dark-mode; e uno nel footer che salva la scelta corrente in localStorage a ogni toggle. Fondamentale: la classe di persistenza va sull’elemento <html>, non su <body> — html esiste prima che il body venga renderizzato, quindi applicare la classe prima del primo paint significa nessun flash del tema sbagliato. (Per questo, cambia anche il target della set-class del toggle da body a html.)

Come si usa

  1. Imposta le variabili. Crea una collezione di variabili colore, raggruppa i colori e aggiungi un variable mode manuale chiamato dark mode con valori sovrascritti.
  2. Collega i colori al sistema. Assegna le variabili prima a livello Body (All Pages), poi a classi/stati specifici così tutto ciò che il tema tocca è guidato dalle variabili.
  3. Costruisci le interazioni del toggle. Un’interazione muove il knob dello switch (anima X, toggle play/reverse). Un’altra usa una action set → class → toggle su dark-mode (target html), toggle play/reverse, runs on all pages.
  4. Aggiungi la transizione fluida. Incolla il CSS theme-transition nell’head. Nell’interazione dello switch, set theme-transition on a 0s e off a 0.8s. Tieni un elemento theme-transition nello style guide così Webflow mantiene la classe.
  5. Aggiungi la persistenza. Aggiungi gli script head + footer (dal cloneable) per localStorage + prefers-color-scheme, poi rendi il toggle un componente e riusalo su tutte le pagine. Pubblica e prova sul link live (il codice custom non gira sempre in preview).

Il JavaScript esatto (persistenza nell’head + salvataggio nel footer) sta nel cloneable — prendilo lì e fai combaciare i nomi di classi/variabili invece di riscriverlo.

Risorse

Domande frequenti

Come costruisco una dark mode in Webflow con le variabili?
Crea una collezione di variabili colore e mettici ogni colore che il tema tocca, poi aggiungi un secondo variable mode (impostalo su manuale) chiamato dark mode e sovrascrivi lì i valori. Una singola classe 'dark-mode' che applica il variable mode scuro può poi invertire l'intera palette in un colpo solo.
Che differenza c'è tra le action set e animate di GSAP?
Animate fa transizionare una proprietà da un valore a un altro su una durata con easing. Set assegna un valore all'istante — niente durata, niente easing — e può anche aggiungere, rimuovere o fare toggle di una classe. Per invertire una classe di tema, set è lo strumento giusto.
Come faccio animare fluidamente il cambio colore della dark mode senza rompere le altre animazioni?
Non aggiungere transizioni permanenti a ogni elemento — interferirebbero con le tue timeline GSAP. Definisci una classe theme-transition (in CSS custom nell'head) che applica transizioni di colore a tutto, poi usa l'interazione per aggiungerla appena prima di cambiare tema e rimuoverla alla fine, così la transizione avviene solo durante lo switch.
Come evito che la dark mode di Webflow si resetti al reload o cambiando pagina?
Aggiungi un po' di JavaScript: uno script nel footer salva la scelta corrente in localStorage a ogni toggle, e uno script nell'head legge quel valore prima che la pagina venga disegnata e applica la classe del tema (con fallback al prefers-color-scheme del sistema). Dato che gira prima del paint e colpisce l'elemento html, il tema persiste senza flash dei colori sbagliati.

← Torna al corso