PrestaShop Design e Navigazione

Modulo Modalità Scura PrestaShop 8/9 — Tema scuro automatico

La modalità scura che i suoi clienti si aspettano, senza toccare il tema.

Rilevamento automatico della preferenza di sistema, memorizzazione della scelta del visitatore e generazione automatica di una palette scura completa. Due motori di rendering, nessun lampeggio al caricamento, compatibile con qualsiasi tema PrestaShop.

A colpo d'occhio
  • Segue automaticamente la modalità scura del sistema del visitatore (prefers-color-scheme)
  • Due motori: filtro intelligente universale o palette scura generata in variabili CSS
  • Nessun lampeggio bianco al caricamento: la classe scura viene applicata prima del primo rendering
  • Pulsante posizionabile ovunque: flottante, hook di tema, hook personalizzato o widget
  • Nessuna modifica al tema, nessuna dipendenza, meno di 8 KB aggiunti
PrestaShop 8 e 9 Multinegozio 5 lingue Nessun lampeggio Senza dipendenze
  • Rimborso 30 giorni
  • 12 mesi di aggiornamenti
  • Supporto 24h
www.datafirefly.com/it/
Module Dark Mode PrestaShop 8/9 — Mode sombre automatique
v1.1.0 · aggiornato 2026-07-12
Cosa fa

L' versione breve.

01

Rilevamento automatico della modalità di sistema

Il modulo legge la preferenza di colore del sistema operativo del visitatore e si adatta in tempo reale: se il suo cliente passa il Mac o l'Android alla modalità scura, il negozio lo segue all'istante, senza ricaricare.

02

Due motori di rendering a scelta

Il filtro intelligente scurisce qualsiasi tema senza configurazione, preservando i colori naturali delle foto prodotto. La palette generata costruisce una vera gamma scura in variabili CSS a partire da due soli colori.

03

Nessun lampeggio al caricamento

Uno script sincrono applica la classe scura prima del primo rendering della pagina. I suoi visitatori in modalità scura non vedono mai il lampo bianco tipico delle soluzioni concorrenti.

04

Il pulsante dove vuole lei

Pulsante flottante in una delle quattro posizioni, oppure interruttore integrato nell'header, nel footer o in qualsiasi hook del suo tema, incluso un hook personalizzato registrato automaticamente.

La versione lunga

Tutto quello che vorresti sapere prima di installare.

Uno sguardo dettagliato su come funziona Modulo Modalità Scura PrestaShop 8/9 — Tema scuro automatico, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.

§ 01

La modalità scura è ormai uno standard, non un'opzione

La maggior parte degli smartphone e dei computer è impostata su un tema scuro, almeno per una parte della giornata. Un sito che resta bianco accecante alle 23 sullo schermo di un telefono provoca un disagio visivo immediato, e spesso un abbandono. Questo modulo porta al suo negozio PrestaShop il comfort che i suoi clienti trovano già ovunque, senza che lei debba toccare una sola riga del suo tema.

§ 02

Segue la preferenza dei suoi visitatori da solo

Per impostazione predefinita, il modulo legge la preferenza di colore del sistema operativo del visitatore e applica la modalità corrispondente. Se il cliente passa il dispositivo alla modalità scura durante la navigazione, il negozio lo segue in tempo reale, senza ricaricare. Non appena usa il pulsante per scegliere esplicitamente, la sua scelta viene memorizzata nel browser e conservata per tutte le visite successive.

§ 03

Un motore universale che rispetta le sue foto prodotto

Il motore a filtro intelligente inverte la pagina e contro-inverte ogni media: immagini, video, iframe, canvas e sfondi. Le sue foto prodotto conservano quindi i colori naturali, e una t-shirt bianca resta bianca. Una protezione contro la doppia inversione gestisce i media annidati, caso frequente nei temi che usano l'elemento picture per il responsive. Luminosità e contrasto sono regolabili per affinare il risultato.

§ 04

Oppure una vera palette scura, generata per lei

Il secondo motore calcola una gamma scura completa a partire da due soli colori: uno sfondo e un accento. Tre livelli di superficie, i bordi, il testo principale e il testo attenuato, l'accento e il suo stato hover ne derivano automaticamente e vengono esposti come variabili CSS. Il colore del testo dei pulsanti è addirittura scelto in base alla luminanza relativa del suo accento, per garantire un contrasto leggibile.

§ 05

Nessun lampo bianco, fin dal primo fotogramma

La maggior parte delle soluzioni per la modalità scura applica il proprio tema in JavaScript dopo il caricamento, il che produce uno sgradevole lampo bianco. Qui uno script sincrono colloca la classe scura sull'elemento radice prima del primo rendering del browser. Il visitatore non vede mai la versione chiara, nemmeno per una frazione di secondo.

§ 06

Il pulsante dove vuole lei, senza programmare

Pulsante flottante discreto in uno dei quattro angoli, oppure interruttore integrato nel suo header o nel suo footer. Sceglie l'hook di destinazione da un elenco, oppure digita il nome di un hook personalizzato del suo tema: il modulo lo registra automaticamente al salvataggio. Per gli integratori, la sintassi widget di PrestaShop consente inoltre di visualizzare il pulsante ovunque in un template.

§ 07

Leggero, autonomo, senza dipendenze

Niente Composer, niente framework, nessuna libreria JavaScript esterna. Circa 8 KB aggiunti in totale, un'API pubblica e un evento di cambio modalità per collegare le sue integrazioni, e una cura completa dell'accessibilità: attributi ARIA, focus visibile e rispetto dell'impostazione di sistema per la riduzione delle animazioni.