L’interruttore del tema scuro

Interruttori, Transizioni, SVGGSAP, Solo CSSMediaPeso compresso: Demo 4,9 KBGSAP 28 KBGratisScarica lo zip

Un interruttore del tema chiaro e scuro, nello stile minimal: la manopola è una luna che cambia fase mentre corre su una molla, e lo stesso terminatore, grande quanto la pagina, la attraversa partendo dalla manopola e porta la notte o il giorno.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The dark theme switch</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- the night: a layer the colour of the other theme, opened by a terminator (the edge between light and shadow)
         that sweeps across the page from the knob, the way the shadow sweeps across the moon -->
    <div class="sweep" aria-hidden="true" data-sweep></div>
    <svg class="edge" aria-hidden="true" focusable="false" data-edge><ellipse data-edge-line></ellipse></svg>

    <div class="theme" data-theme>
      <span class="theme__name" id="theme-name">Appearance</span>
      <div class="theme__row">
        <button class="switch" type="button" role="switch" aria-checked="false" aria-labelledby="theme-name theme-word" data-switch data-autoclic>
          <svg class="switch__art" viewBox="0 0 104 56" aria-hidden="true" focusable="false">
            <rect class="switch__track" x="1" y="1" width="102" height="54" rx="27"></rect>
            <g data-knob>
              <circle class="switch__rim" cx="0" cy="0" r="19"></circle>
              <path class="switch__lit" data-lit></path>
            </g>
          </svg>
        </button>
        <span class="theme__word" id="theme-word" aria-hidden="true">
          <span class="theme__w" data-word-light>Light</span>
          <span class="theme__w" data-word-dark>Dark</span>
        </span>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

14 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «L’interruttore del tema scuro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca, sotto la parola «Appearance», un binario sottile a pillola con dentro una luna piena e nera, e accanto la parola «Light». Al clic (o al tocco, o con Spazio e Invio) la luna corre all’altro capo su una molla, va oltre di un pixel e torna; correndo l’ombra la attraversa e la luna diventa una falce sottile. Intanto, dal punto in cui sta la manopola, si apre una lente verticale sottilissima che si allarga di lato, come il confine fra luce e ombra che attraversa la luna, e porta il nero su tutta la pagina; il suo bordo si vede per un attimo in arancio. Quando il bordo passa sull’interruttore, binario, parole e luna prendono i colori nuovi; «Light» si stringe e si assottiglia fino a sparire, «Dark» arriva larga e leggera e si posa. Un altro clic riporta il giorno allo stesso modo. Col puntatore sopra la luna si sporge appena verso l’altro capo; premuta, si rimpicciolisce. All’apertura il tema segue quello del sistema.

Come funziona

La luna in un tracciato

La manopola è un cerchio sottile e un path, la parte illuminata, rifatto a ogni fotogramma dalla frazione illuminata f: mezzo cerchio a destra (il bordo in luce) e mezza ellisse larga |2f − 1| volte il raggio (il terminatore), che si gonfia a sinistra quando f è oltre la metà e a destra quando è sotto. Così da 1 (piena) a 0,16 (falce) l’ombra la attraversa come nelle fasi vere.

La molla e la fase

Un solo oggetto di numeri (x, fase, onda, pressione) animato da una timeline di GSAP: la x con back.out(0.9), che va oltre di circa un pixel e torna; la fase con power2.inOut nello stesso tempo. Il gruppo della manopola si sposta con un transform scritto a ogni aggiornamento della timeline.

Il terminatore sulla pagina

La notte è un livello del colore dell’altro tema, ritagliato da un clip-path ellipse calcolato in pixel a ogni fotogramma dal centro vero della manopola: alto LENS volte (3) la distanza dal bordo più lontano, largo quanto basta a coprire l’angolo più lontano (dx diviso la radice di 1 − (dy/ry)²) per l’avanzamento. All’inizio è una linea verticale, poi si apre come una lente; un’ellisse SVG con lo stesso centro e gli stessi raggi disegna il bordo in arancio. Alla fine i colori della pagina passano al tema nuovo e il livello torna a zero.

Colori e parole

I colori sono variabili CSS: la pagina usa quelle di :root, l’interruttore le sue, che GSAP porta ai colori nuovi appena il bordo lo passa. Le due parole stanno una sopra l’altra: quella che esce va a wdth 62 e wght 300 e sparisce, quella che entra parte da wdth 125 e wght 260 e si posa con back.out.

Accessibile

È un button con role="switch" e aria-checked, etichettato dalle due parole; Spazio e Invio lo girano come il clic, il fuoco si vede con un anello arancio. Lo stato iniziale viene da prefers-color-scheme e la pagina cambia anche color-scheme. Un clic a metà porta subito alla fine il giro in corso e parte quello nuovo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`KNOB_TIME`	script.js	`0.62`	Quanto ci mette la manopola ad attraversare, in secondi.
`SPRING`	script.js	`0.9`	Quanto la manopola va oltre il suo capo (0 per niente; 0,9 è circa un pixel).
`WAVE_TIME`	script.js	`0.95`	Quanto ci mette il terminatore ad attraversare la pagina, in secondi.
`DARK_PHASE`	script.js	`0.16`	Quanto è illuminata la luna nel tema scuro (1 è la luna piena).
`LENS`	script.js	`3`	Quanto è alta la lente che attraversa la pagina: più alta, un bordo più dritto.
`PEEK`	script.js	`3`	Quanto la manopola si sporge verso l’altro capo sotto il mouse, in pixel.

Provali nel Playground

Quando usarla

Per l’interruttore del tema in qualunque sito o app: le impostazioni di un’app, la testata di un blog, il piè di pagina di un portfolio, il pannello di una dashboard. Dove serve che chi lo gira veda subito cosa succede.

Sul telefono

Uguale col tocco: l’interruttore resta grande 104 per 56 e la parola si rimpicciolisce un poco; il terminatore attraversa lo schermo stretto dal punto in cui sta la manopola.

Con il movimento ridotto

Niente corsa né lente: la manopola e la luna sono già al loro posto, la pagina e l’interruttore passano all’altro tema in una dissolvenza breve e le parole si scambiano in dissolvenza.

Trappole

La notte si allargava come un cerchio, come nell’interruttore giorno e notte che c’è già: ora è una lente alta più della pagina che si allarga solo di lato, il terminatore della luna in grande, ed è un’idea diversa.
Col movimento ridotto i colori dell’interruttore non avevano un valore da cui partire (le variabili erano solo su :root) e saltavano: ora le variabili si scrivono sull’interruttore prima di ogni giro.
La lente si calcola dal centro vero della manopola a ogni fotogramma: calcolata una volta sola all’inizio, rimpicciolendo la finestra a metà non copriva più gli angoli.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,9 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 21 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.