← Tutti gli articoli

Tutorial

Modalità scura per qualsiasi sito — 4 approcci CSS

15 maggio 2026 · di JustZix Team

Il tuo sistema operativo ha la modalità scura da anni. Il tuo browser la supporta. La maggior parte delle app la rispetta. Poi apri una documentazione, un blog o una intranet del 2014 — e ti prendi in faccia uno sfondo bianco al 100% alle 23. Quattro metodi per risolverlo una volta per tutte.

Perché questo problema esiste

Lo standard CSS prefers-color-scheme è in Chrome dal 2019 e in Safari dal 2018. Il tuo OS conosce la tua preferenza, il browser la propaga, i siti dovrebbero rispettarla. Dovrebbero — in pratica ~40% dei siti la ignorano. Motivi: codebase legacy, niente budget per un secondo tema, marketing che vuole la «coerenza del brand», l'autore non ci è ancora arrivato.

Se l'autore non lo fa per te — fallo tu. Quattro metodi, in ordine di eleganza crescente.

Metodo 1 — filtro universale (funziona su tutto)

Uno snippet, si adatta a qualsiasi sito, nessuna analisi del CSS specifico necessaria:

html {
  filter: invert(0.92) hue-rotate(180deg);
  background: #1a1a1a;
}

/* Re-invertire immagini, video e iframe perché sembrino
   naturali — altrimenti i selfie dei tuoi amici sembrano
   col filtro pelle verde. */
img, video, picture, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

Trucco: invert(0.92) invece di invert(1) pieno dà un nero più morbido di uno scambio netto bianco→nero — più riposante per gli occhi. hue-rotate(180deg) corregge i colori così l'arancione resta arancione (e non diventa blu).

Pro: funziona ovunque, zero analisi.
Contro: ombre, gradienti, grigi delicati sembrano strani. Alcuni elementi fixed (header sticky) possono desincronizzarsi durante lo scroll.

Metodo 2 — forzare prefers-color-scheme: dark

Siti che hanno la modalità scura ma reagiscono solo alla preferenza del sistema. E se tieni l'OS in chiaro (perché stai progettando in Figma) ma vuoi la documentazione di GitHub in scuro? Sovrascrivi matchMedia:

// Forzare prefers-color-scheme: dark via JS
const dark = window.matchMedia('(prefers-color-scheme: dark)');
Object.defineProperty(dark, 'matches', {
  get: () => true,
  configurable: true,
});

// Notificare i listener (siti agganciati via addEventListener)
dark.dispatchEvent(new Event('change'));

Funziona su qualsiasi sito che usa window.matchMedia('(prefers-color-scheme: dark)') per il rilevamento — tutte le app React/Vue moderne. Non funziona sui siti che rilevano una sola volta al caricamento (dovresti ricaricare), o su CSS statico senza rilevamento JS.

Metodo 3 — sovrascrivere le custom property CSS

I siti costruiti su variabili CSS (~60% delle webapp moderne) hanno di solito token di tema come --bg-primary, --text-primary. Apri i DevTools, trova i nomi, sovrascrivi:

/* Esempio: Stripe Dashboard, dove tutto è basato su variabili */
:root {
  --color-canvas-default: #0d1117 !important;
  --color-canvas-subtle: #161b22 !important;
  --color-fg-default: #c9d1d9 !important;
  --color-fg-muted: #8b949e !important;
  --color-border-default: #30363d !important;
}

Pro: preciso, non rovina immagini né ombre.
Contro: 5 minuti di scavo nei DevTools per trovare i nomi delle variabili. Il sito deve usare variabili CSS (verifica: document.documentElement.style nella console).

Metodo 4 — tema scuro dedicato per sito

Per i siti su cui passi ore ogni giorno — 30 minuti per un tema su misura valgono la pena. Override selettivo:

/* La tua generica intranet aziendale */
body, .page-content, .sidebar, .top-bar {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}

.card, .panel, .modal {
  background: #242424 !important;
  border-color: #333 !important;
}

a, a:visited { color: #58a6ff !important; }
a:hover { color: #79c0ff !important; }

input, textarea, select {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Tabelle — il più critico per la leggibilità */
table th { background: #2d2d2d !important; color: #fff !important; }
table tr:nth-child(odd) { background: #1f1f1f !important; }
table tr:nth-child(even) { background: #1a1a1a !important; }

Parti dai contenitori principali (body, page), scendi verso i componenti (card, modali), chiudi con gli elementi dei form e le tabelle. Senza !important di solito non vinci — il sito ha i propri stili a specificità più alta.

Trappole comuni

• Il background-image inline (es. style="background: url(...)") — il filtro del metodo 1 non sempre lo cattura. Aggiungi [style*="background-image"] separatamente.
• Le ombre su sfondo scuro sembrano aloni. Rimuovile (box-shadow: none) o sostituiscile con un accento più chiaro.
• I colori del brand (loghi, icone colorate) perdono riconoscibilità dopo l'inversione. Aggiungi eccezioni: .brand-logo { filter: invert(1) hue-rotate(180deg) !important; }.
• I form hanno spesso color: black hardcoded inline. Sovrascrivi esplicitamente: input { color: #e0e0e0 !important; }.
• Gli elementi sticky / fixed con il filtro del metodo 1 possono desincronizzarsi durante lo scroll. Di solito accettabile, ma è bene saperlo.

Come collegarlo a JustZix

1. Installa JustZix (2 minuti).
2. Crea una cartella chiamata «Modalità scura».
3. Regola «Modalità scura ovunque»: pattern URL *, CSS = Metodo 1. Impostala inattiva di default — attivala quando ti serve.
4. Regola per sito preferito: pattern https://myapp.com/*, CSS = Metodo 3 o 4 (con token / selettori specifici). Sempre attiva.
5. Commuta l'intera cartella con un clic sul pulsante flottante — chiaro/scuro in una mossa.

Cosa fare dopo

La stessa gerarchia (universale → preciso per sito) vale in altre categorie di regole — vedi Esempi e Casi d'uso. La modalità scura è solo il caso più ovvio.

Installa JustZix gratis e controlla finalmente l'aspetto dei siti che fissi 8 ore al giorno.