Safari scurisce i siti che non l'hanno mai chiesto, e la tua pagina non può accorgersene

Qualcuno ti dice che i colori del tuo sito non sembrano corretti. Sbiaditi, o invertiti, o il grafico nel mezzo della pagina è un rettangolo bianco brillante in un layout altrimenti scuro. Apri la stessa pagina sullo stesso modello di telefono e tutto è esattamente come l’hai progettato.

Non si sbagliano e neanche tu. Dal 3 novembre 2026 c’è una terza parte in quella conversazione, e la cosa che vale la pena sapere non è che cambia i tuoi colori. È che la tua pagina viene deliberatamente impedita di scoprirlo.

Cos’è l’Adaptive Dark Mode

L’Adaptive Dark Mode è arrivato in Safari 27.3 beta. La descrizione stessa di WebKit è una sola frase: “Quando abilitata da un utente, Safari adatta i siti chiari e li presenta come scuri.”

Il motivo che danno è il divario tra due numeri, e vale la pena citarli perché spiegano perché questo doveva accadere: “Quasi il 40% dei caricamenti delle pagine web proviene da utenti in modalità scura, eppure solo il 10% dei caricamenti delle pagine la supporta.”

È opt-in, dall’utente e non da te. Qualcuno che naviga con un’apparenza di sistema scura atterra su una pagina luminosa, Safari offre un’anteprima, e tappa Prova. Da allora in poi, le pagine chiare escono scure per loro. Non c’è banner sulla pagina e nulla nelle tue analitiche che dice che è successo.

Come decide se modificare la tua pagina

Ci sono due percorsi e solo uno di loro ti riguarda.

Se la tua pagina dichiara il supporto per la modalità scura, non succede nulla. Una pagina con <meta name="color-scheme" content="light dark"> nell’HTML, o color-scheme: light dark in CSS, viene lasciata esattamente come scritta. Hai detto a Safari che gestisci il tema scuro da solo, e lui ti crede.

Per tutto il resto, guarda. Analizza la pagina, stima se è prevalentemente chiara o scura, e lascia sole le pagine che sembrano scure. Una pagina con un aspetto luminoso viene trasformata.

La trasformazione stessa è una matrice di colore che inverte la luminosità mentre preserva la tonalità, quindi uno sfondo bianco diventa scuro e il testo scuro diventa chiaro senza che tutto si trasformi in un negativo fotografico. Per il testo mira a un contrasto WCAG 4.5:1.

La parte che produce bug è quello che non trasforma

Un’inversione totale sarebbe facile da capire. Questa non lo è, e le eccezioni sono da dove vengono le segnalazioni.

• Le sfumature CSS chiare vengono trasformate, quindi una sfumatura che hai accordato con cura viene ricalcolata.
• Le immagini SVG vengono ispezionate e i loro colori vengono trasformati quando necessario. Le immagini bitmap vengono per lo più lasciate sole, ma gli istogrammi dei pixel vengono analizzati e semplici loghi in bianco e nero vengono invertiti.
• Le maschere e mix-blend-mode possono essere disattivate. Il ragionamento di WebKit è che questi effetti producono risultati indesiderati su un elemento i cui colori sono stati trasformati, quindi in alcuni casi Adaptive Dark Mode li disattiva piuttosto che trasformarli.
• <canvas> è completamente lasciato invariato, perché il contenuto canvas è, secondo loro, “difficile da prevedere”.

Leggi gli ultimi due insieme e avrai un difetto che nessuno ha scritto. Un grafico renderizzato in un canvas mantiene lo sfondo bianco mentre ogni pixel attorno diventa scuro. Un overlay composited smette di compositing. Entrambi sono invisibili a te e ovvi per la persona che guarda lo schermo.

La tua pagina non è autorizzata a sapere

Questa è la parte che importa se stai cercando di capire cosa sta vedendo qualcuno, ed è una scelta di progettazione deliberata piuttosto che una lacuna.

La posizione di Apple è che un’impostazione rilevabile è una superficie di fingerprinting, quindi:

Safari impedisce ai siti web di rilevare quando Adaptive Dark Mode è stata applicata. JavaScript che interroga i colori CSS otterrà i colori originali scritti, non quelli trasformati.

È assoluto, e la soluzione ovvia è chiusa nello stesso paragrafo: “Qualsiasi immagine disegnata nel canvas viene renderizzata nella forma originale.” Fare uno screenshot della tua stessa pagina in un canvas restituisce la versione che hai scritto, non la versione che viene visualizzata.

Quindi getComputedStyle ti restituisce i tuoi stessi valori. Un endpoint diagnostico che segnala i colori calcolati segnala il tuo foglio di stile. Una richiesta di “incolla i tuoi stili calcolati” al responsabile restituisce lo stesso. Ogni strumento che possiedi è dalla parte sbagliata della trasformazione, che è una forma familiare: la pagina non può vedere se stessa, e l’unico testimone è una persona che guarda uno schermo.

Rinuncia, e il cavillo di oggi

Due dichiarazioni, che fanno cose opposte.

color-scheme: light dark dice che supporti la modalità scura e la gestirai. L’Adaptive Dark Mode poi ti lascia stare. Questo è quello da usare se hai, o intendi costruire, un vero tema scuro, e il consiglio di WebKit è di dichiararlo nell’intestazione HTML piuttosto che iniettarlo in seguito con JavaScript, così la pagina si renderizza correttamente il prima possibile.

color-scheme: light only, o <meta name="color-scheme" content="light only">, dice che la pagina dovrebbe essere visualizzata solo in modalità chiara, e rifiuta la trasformazione completamente.

Il cavillo vale la pena sapere prima di spedirlo come correzione: WebKit nota che la parola chiave only “non è supportata in Safari 27.3 beta 1”. È una beta, la funzione è esplicitamente descritta come in evoluzione durante quella beta, e la scappatoia documentata non funziona ancora nella prima build di essa.

Cosa chiedere alla persona che l’ha segnalato

La domanda ordinaria, “quale browser e versione”, non ti porterà lì. Qualcuno che ha tappato Prova diverse settimane fa non la pensa come un’impostazione che ha cambiato, proprio come non segnalerebbe la luminosità dello schermo.

Due domande funzionano. Sembra sbagliato in una finestra privata? e sembra sbagliato su un dispositivo diverso? Entrambi cambiano la risposta se l’Adaptive Dark Mode è coinvolto, e nessuno dei due richiede al responsabile di sapere di cosa si tratta.

Ancora meglio è una foto. Il divario tra quello che il tuo codice descrive e quello che uno schermo mostra è esattamente il divario che una schermata chiude, e in questo caso è l’unica cosa che può, perché la pagina stessa è stata messa dalla parte sbagliata della domanda.

Questa è la seconda volta in un anno che un rilascio di Safari ha cambiato cosa significa una segnalazione di bug piuttosto che quello che una pagina può fare, dopo i cambiamenti di segnalazione in Safari 27.

Cosa portare da questo

Un browser ora modifica i tuoi colori per conto dell’utente, decide caso per caso quali elementi modificare, disattiva alcuni dei tuoi effetti per farlo, e nasconde l’intera operazione dal tuo codice per una buona ragione.

Se hai un tema scuro, dichiaralo e questo non si applica mai a te. Se no, la scelta realistica è farla accadere e controllare che i tuoi canvas e i tuoi blend mode sopravvivano, o dichiarare light only e aspettare la beta che lo supporta. Quello che non è disponibile è scoprirlo da dentro la pagina, il che significa che il prossimo rapporto di “i colori non sembrano corretti” è uno che dovresti credere.

L’annuncio di WebKit, con gli esempi e l’elenco completo di quello che è e non è trasformato, è Presentazione di Adaptive Dark Mode.