Dark Mode e comfort visivo

1) Perché un argomento oscuro

Comfort degli occhi in bassa illuminazione, meno riflessi e «flash luminosi».
Energia: gli schermi scuri OLED/AMOLED spendono meno della batteria.
Il focus sui dati è sul contenuto, non sullo sfondo.
Attesa utente: flag di sistema «prefers-color-scheme» - standard di fatto.

2) Principi

1. Sfondo grigio scuro> nero puro per le superfici UI (migliore leggibilità e gradazione).
2. Il contrasto sui contenuti non è «bianco su nero», ma le tonalità morbide per i testi lunghi.
3. Luminosità attenta: evidenziazione/accento attenuato, ma differente.
4. La profondità dell'ombra è che lavoriamo con un'ombra chiara e sfumata, non con un contrasto forte.
5. Disponibilità: WCAG AA (minimo), attivo visibile e stato comprensibile.
6. Le impostazioni di sistema sono principali: failover automatico e movimento ridotto.

3) Tavolozza e token (esempio)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• L'accento in modalità scura è + 8-12% più chiaro di quello in modalità luce.
• Utilizzate le scala di grigio (4-5 passi) per evitare l'assoluto # 000 per gli spazi più grandi (l'eccezione è AMOLED).

4) Testo e leggibilità

Il testo principale è «# E6E8EB» in grigio chiaro su «# 0E1116».
Testo secondario: '# A6AEB8'; i suggerimenti sono un altro passo più scuro/trasparente.
Lettura lunga: tonalità leggermente calde (riducono il galo).
Collegamenti - Accento + sottolineatura predefinita il colore è l'unico portatore di significato.

5) Superfici, profondità e vetro

Elevations: `base` → `elev1` → `elev2`; ogni strato è più chiaro/caldo del 2-4%.
Ombre - morbide, ampie, a bassa opacità; evitare i tratti «luminosi».
I pannelli di traslazione (blur) sono moderati; assicurate il contrasto del testo con il sottovuoto.
I separatori sono bordi semidiretti' --bd-soft'o «hare» appena visibili.

6) Stati e attivo

Hover: + 2-3% più chiaro di sfondo; Active: - 2-3% (più scuro).
Focus: anello chiaro (ad esempio, 'outline: 2px solid # 6EA0FF; outline-offset: 2px; '), visibile anche nei pulsanti.
Disabled: ridurre il contrasto con attenzione; non scendere al di sotto del livello di lettura del testo.

7) Pulsanti, moduli e tabelle

Primary: sfondo --accent, testo # 0E1116.
Secondary: sfondo --bg-elev1, border --bd-strong, testo --fg-primary.
I campi di input sono lo sfondo --bg-elev1, il borgo è accentrato. Il placeholder è più tondo, ma lo leggiamo.
Tabelle: sfondo zebra a malapena visibile, la selezione della riga hover è + 2-3% più chiara.

8) Illustrazioni, loghi e foto

Logo e icone - versioni invertite su scuro; evitare linee di luce sottili su fondi saturi.
Foto: aggiungi una maschera scura (40-60%) per i titoli di contrasto sopra.
Icone - Spessore unico, tracciato + riempimento - Non velenoso.

9) Data-visualizzazione in un argomento oscuro

Colori delle righe - saturazione moderata; Almeno un 5 di toni diversi.
Le griglie e gli assi sono abbassati (alfa 20-30%), le firme sono --fg-muted.
Annotazioni/incidenti - brillanti ma leggibili; sottolineare con un modulo o un indicatore, non solo con un colore.
I dati vuoti/lega sono nebbie morbide, non campi bianchi.

10) Prestazioni e batteria

OLED effettivamente risparmia nero puro (# 000) - Utilizzare la modalità AMOLED in base all'opzione utente.
Evitare una candela/blur totale su GPU deboli.
Rispetta «preferers-reduced-motion»: semplifica le animazioni/transizioni.

11) Comportamento e commutazione

L'impostazione predefinita è «preferers-color-scheme».
Date all'utente un pulsante esplicito (Light/Dark/System) e salvate la selezione (cookie/localStorage).
Quando si cambia argomento - senza flash - Aggiunge una classe di argomento al render.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Disponibilità (A11y)

Contrasto del testo 4. 5:1 (normale), 3:1 (grande).
Non codificare lo stato solo con il colore: usa l'icona/pattern/firma.
Gli stili di attivazione e la navigazione da tastiera sono obbligatori.
Ruoli, etichette, fila di tabù.

13) Anti-pattern

Un testo completamente bianco in fondo nero su grandi piazze - «stanchezza» e stanchezza.
L'accento al neon sul buio è il rumore della luce.
Ombre ad alto contrasto (grigio su nero).
Testo trasparente nella foto senza maschera.
Placeholder in estinzione (alfa troppo basso).

14) Esempi di componenti

Pulsante

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Scheda

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Test-piano

Illuminazione camera oscura/luce del giorno/notte di strada.
I device sono OLED e IPS, mobile/disctop, densità diverse.
A11y - Contrassegno, tastiera, lettura placeholder'ov.
Percezione: ab-test stanchezza oculare e errori di notte.
Perfomance: metriche RUM (INP/CLS) dopo l'attivazione del tema oscuro; carica GPU (effetti blur/ombra).

16) Metriche di qualità

Contrast Violations/1k elementi (obiettivo: → 0).
Complaint Rate su «troppo scuro/luminoso».
Night Sessions Complition (metriche comportamentali per sessioni 22: 00-06: 00).
INP/CLS p75 in Dark Mode vs Light (non peggio di base).
Opt-in Dark Mode e trattenere gli utenti che hanno scelto un argomento.

17) Assegno foglio di avvio

• Tavolozza di tema oscuro con 4-5 livelli di superficie
• Il contrasto testo/icona/limite corrisponde a WCAG AA
• Stili e stati visibili (hover/active/disabled)
• Loghi/icone/foto adattati, maschere aggiunte alla foto
• Grafici - griglie abbassate, etichette a lettura, righe non velenose
• Interruttore Light/Dark/System, salvare la selezione senza «flash»
• Rispettare «preferers-color-scheme» e «preferers-reduced-motion»
• RUM/perf-dashboard, alert di regressione

18) Piano di implementazione (3 iterazioni)

Iterazione 1 - Fondamenta (1-2 settimane)

Tavolozza/token, superfici di base (base/elev1/elev2), testo/limite, pulsanti/campi/tabelle, pulsante di scelta.

Iterazione 2 - Dettagli (3-4 settimane)

Grafici e immagini in scuro, maschere in foto, focus/stato, animazioni in base a reduced-motion, perf-verifiche.

Iterazione 3 - Ottimizzazione (continua)

Modalità AMOLED come opzione, regolazione sottile dei contrasti, test usability di notte, confronto RUM Light vs Dark, regolari marchi/verifiche UX.

19) Mini FAQ

Fare uno sfondo nero?
Per l'UI è meglio il grigio scuro profondo; «Modalità AMOLED» netta # 000.

Dobbiamo aumentare la saturazione degli accenti?
Nel buio, di solito, al contrario, si illumina leggermente e si riduce la saturazione in modo da non «brillare».

E le immagini dei banner?
Aggiungi un sottolivello scuro/maschera, controlla il contrasto tra testo e logo.

Totale

Il tema scuro non è l'inversione dei colori, ma una modalità di progettazione separata: tavolozza elaborata, livelli di superficie, leggibilità, stati corretti, grafica e media adattati e rispetto delle impostazioni di sistema. Affidarsi ai token, controllare il contrasto e la perfomance - e Dark Mode sarà uno strumento comodo, stabile e bello per gli utenti notturni e diurni.