Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

L’attesa dell’oscurità

Nel 2020, la modalità oscura è stata “bello da avere”. Nel 2025, è un requisito. iOS, Android, macOS e Windows supportano tutti la modalità oscura a livello di sistema. Se il tuo utente ha il telefono impostato in modalità oscura (per risparmiare batteria o proteggere la vista durante la notte) e apre il tuo sito web e viene colpito da un’esplosione di luce bianca #FFFFFF… Chiudono la scheda. È fisicamente doloroso. Modalità oscura non è una funzionalità; è Empatia dell’utente.

Perché Maison Code parla della modalità oscura

Noi di Maison Code ci impegniamo per “L’esperienza senza soluzione di continuità”. Garantiamo che i siti dei nostri clienti rispettino automaticamente le preferenze di sistema dell’utente (“prefers-color-scheme”). Ma, cosa ancora più importante, comprendiamo che la modalità oscura è una sfida di branding. I marchi di lusso si affidano a colori specifici. Come traduci “Chanel Black on White” in Dark Mode senza perdere l’identità? Gestiamo questa traduzione semantica quotidianamente. Non ci limitiamo a “invertire i colori”. “Reinterpretiamo” il marchio per ambienti con scarsa illuminazione.

La strategia di ingegneria: variabili CSS + HSL

(Vedi Variabili CSS). L’approccio ingenuo è: corpo.scuro { sfondo: nero; colore: bianco; }. Sembra terribile. Il nero puro (#000) provoca “sbavature” sugli schermi OLED durante lo scorrimento. Il testo in bianco puro (#FFF) su nero puro provoca affaticamento degli occhi (alazione).

L’approccio semantico: Definiamo i colori utilizzando HSL (tonalità, saturazione, luminosità). Questo ci consente di modificare la luminosità a livello di codice.

:radice {
  /* Tonalità del marchio (ad esempio blu) */
  --brand-h: 210;
  --marchi: 100%;
  
  /* Modalità luce */
  --bg-l: 100%;
  --testo-l: 10%;
  
  --bg-colore: hsl(var(--brand-h), 10%, var(--bg-l));
  --text-color: hsl(var(--brand-h), 10%, var(--text-l));
}

[tema-dati="scuro"] {
  /* Modalità oscura: basta cambiare la luminosità */
  --bg-l: 10%;
  --testo-l: 90%;
}

Nota che non abbiamo scelto solo “Nero”. Abbiamo scelto un “Blu molto scuro” (“hsl(210, 10%, 10%)”). Ciò preserva la tinta del marchio anche in modalità oscura. Sembra più ricco e pregiato del grigio piatto.

Implementazione tecnica: Toggle e Flicker

La parte più difficile della modalità oscura è il FOUC (Flash of Unstyled Content) o Flash of White.

L’utente carica la pagina (il server invia HTML).
Il browser esegue il rendering dello sfondo bianco per impostazione predefinita.
JS carica, legge “localStorage”, vede “Dark”.
JS aggiunge la classe “.dark”.
La pagina lampeggia e diventa nera. Questo lampo di una frazione di secondo distrugge l’esperienza dell’utente.

La soluzione: uno script bloccante in <head>. È necessario inserire un piccolo script prima che il CSS venga caricato.

<testa>
  <copione>
    (funzione() {
      const memorizzato = localStorage.getItem('tema');
      const system = window.matchMedia('(preferisce-schema-colori: scuro)').matches;
      if (stored === 'dark' || (!stored && system)) {
        document.documentElement.classList.add('scuro');
      }
    })();
  </script>
</testa>

Dato che questo script è in head ed è bloccante, il browser lo esegue prima del primo paint. La pagina viene inizialmente visualizzata come Scuro. Sfarfallio zero.

Progettare in profondità

In modalità Luce, utilizziamo le Ombre per mostrare la profondità (carte fluttuanti sullo sfondo). In modalità oscura, le ombre sono invisibili (ombra scura su sfondo scuro). Soluzione: utilizza Leggerezza per mostrare la profondità.

Sfondo: livello 0 (più scuro).
Carta: Livello 1 (Leggermente più leggera).
Modale: Livello 2 (Più leggero).
Pulsante: livello 3 (il più leggero). Invece di “Ombre”, utilizziamo “sovrapposizioni” o leggeri cambiamenti di colore dello sfondo.

Immagini e modalità oscura

Le immagini luminose in modalità scura possono essere stridenti. Suggerimento: ridurre leggermente la luminosità e il contrasto delle immagini in modalità oscura.

[data-theme="scuro"] img {
  filtro: luminosità (0,8) contrasto (1,2);
}

Ciò fa sì che la grafica si fonda meglio con l’interfaccia scura.

Il punto di vista dello scettico

“La modalità oscura è una moda passeggera. Mi piace la carta bianca.” Contropunto:

Batteria: sugli schermi OLED (iPhone X+), i pixel scuri sono disattivati. La modalità oscura consente di risparmiare circa il 30% della durata della batteria.
Salute: ridurre l’esposizione alla luce blu durante la notte aiuta l’igiene del sonno.
Scelta: offre all’utente la scelta. Se forzi la modalità Luce, sei arrogante.

Domande frequenti

D: Devo utilizzare un pulsante di attivazione/disattivazione? R: Sì. Rileva prima automaticamente preferisce-schema-colori, ma consente l’override dell’utente. Inseriscilo nel piè di pagina o nell’intestazione.

D: Invertire i loghi? R: Se il tuo logo è testo nero, scompare in modalità oscura. Hai bisogno di un logo SVG che erediti currentColor oppure devi scambiare la sorgente dell’immagine (logo-dark.png).

11. Gestione avanzata delle icone (SVGcurrentColor)

Interrompi l’esportazione delle icone PNG nere. Utilizza gli SVG in linea con fill="currentColor". Ciò fa sì che l’icona erediti il colore del testo del suo genitore. Se il testo principale è bianco (modalità scura), l’icona è bianca. Se il testo principale è nero (modalità luce), l’icona è nera. Ciò elimina la necessità di duplicati “icon-dark.svg” e “icon-light.svg”. Una risorsa. Temi infiniti.

12. Preferenza persistente senza FOUC

Il dibattito “Cookie” vs “LocalStorage”. Se utilizzi il rendering lato server (Next.js), “localStorage” non è disponibile sul server. Quindi il server esegue il rendering della modalità luce. Il client idrata la modalità oscura. Sfarfallio. Soluzione: cookie. Quando l’utente attiva/disattiva il tema, imposta un cookie theme=dark. Leggi questo cookie in “middleware.ts” o “getServerSideProps”. Inietta <html class="dark"> sul server. Adesso l’HTML arriva già Dark. Prima vernice perfetta.

13. Accessibilità: rapporti di contrasto (WCAG)

La modalità oscura è spesso più difficile da leggere per l’astigmatismo. L‘“Halation” (effetto alone) si verifica con testo bianco su sfondo nero. Regola: non utilizzare mai il nero puro (#000000). Utilizza il grigio scuro (#121212 o simile). Riduce l’affaticamento degli occhi. Test: utilizza il selettore “Contrasto” di Chrome DevTools. Assicurati che il tuo testo soddisfi lo standard AA (4.5:1). Spesso il tuo “Brand Blue” funziona sul Bianco ma fallisce sul Nero. È necessario --brand-text-dark (un blu più chiaro) specifico per il testo in modalità oscura.

14. Gestire dinamicamente le modifiche ai temi del sistema

L’utente cambia il Mac da Chiaro a Scuro durante la navigazione. Il tuo sito si adatta istantaneamente? Utilizza il listener di eventi “change” su “matchMedia”.

window.matchMedia('(preferisce-schema-colori: scuro)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "scuro": "chiaro";
    // Aggiorna solo se l'utente non ha sovrascritto esplicitamente la logica
    if (!localStorage.getItem('tema')) {
        document.documentElement.classList.toggle('dark', e.matches);
    }
});

Ciò consente quella sensazione “magica” in cui il sito Web respira con il sistema operativo.

15. Ottimizzazione OLED (True Black vs Grey)

C’è un dibattito. Nero puro (#000000) disattiva i pixel. Risparmia la batteria massima. Grigio scuro (#121212) è migliore per la leggibilità del testo e riduce le sbavature dell’OLED (scia viola durante lo scorrimento). Verdetto del codice maison: utilizzare il grigio scuro per le superfici (carte, sfondi) e il nero puro per i bordi o lo spazio negativo. Questo ti dà la “sensazione premium” senza artefatti visivi. Usiamo anche meta name="theme-color" per colorare la barra del browser Safari in modo che corrisponda allo sfondo, creando un’esperienza simile a un’app senza bordi.

16. Rilevamento temi lato server (suggerimenti per il cliente)

I biscotti sono buoni I suggerimenti per i clienti sono migliori. Sec-CH-Preferisce-Schema-Colori. Se il browser invia questa intestazione, il server sa che l’utente preferisce la modalità oscura senza leggere un cookie. Questo è il Santo Graal. Permette che la primissima visita (senza cookie) sia perfettamente tematizzata. Maison Code implementa questo standard all’avanguardia per i nostri clienti per garantire Zero-Flicker sul primo byte.

17. Perché Maison Code?

Noi di Maison Code non ci limitiamo a “capovolgere i colori”. Riprogettiamo l’identità del marchio per ambienti con scarsa illuminazione. Controlliamo i rapporti di contrasto per garantire la conformità all’accessibilità (ADA/WCAG). Implementiamo lo script “Flicker-Free” per garantire che i tuoi utenti non vengano mai flashati. Crediamo che la modalità oscura sia un esercizio di empatia. Dimostra che ti interessa il modo in cui i tuoi utenti consumano i tuoi contenuti.

17. Conclusione

La modalità oscura non riguarda il cambiamento dei colori. Si tratta di controllare i rapporti di contrasto (WCAG AA), gestire la percezione della profondità e rispettare il contesto dell’utente. Implementato bene, di notte sembra l’interno di un’auto di lusso. Implementato male, sembra un prompt dei comandi rotto. Non lasciare che il tuo marchio sembri rotto il 50% delle volte.

Accecare i tuoi utenti?

Implementiamo la modalità Dark System senza sfarfallio che rispetta la durata della batteria e gli occhi dell’utente. Assumi i nostri architetti.