← Tutti gli articoli

Tutorial

Crea una modalità scura universale con il CSS

17 maggio 2026 · di JustZix Team

La maggior parte dei siti propone ancora uno sfondo bianco accecante, e non tutti offrono un tema scuro. Con JustZix puoi associare una regola CSS a qualsiasi URL e forzare una modalità scura che ti segue ovunque. Ecco le ricette che uso davvero.

La modalità scura più veloce: inverti la pagina

Il trucco più rapido è invertire l'intero documento e ruotare la tonalità all'indietro così i colori restano all'incirca corretti. Anche foto e video vengono invertiti, quindi li ruotiamo all'indietro una seconda volta.

html {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

È una vittoria di una riga. Non è perfetta — le ombre sembrano strane e i colori del marchio cambiano — ma per una rapida sessione di lettura è imbattibile. Crea una regola CSS JustZix, abbinala al dominio che vuoi, incolla, fatto.

Una modalità scura nativa più pulita

Per i siti che visiti ogni giorno, un tema messo a punto a mano batte l'inversione. Invece di invertire, ridipingi direttamente sfondi e testo. Questo lascia intatti immagini e colori d'accento.

:root {
  --bg: #16181c;
  --bg-soft: #1f232a;
  --text: #d6d9de;
}
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
a { color: #6ea8fe !important; }

I selettori sono volutamente ampi. Raramente avrai bisogno di essere preciso — la maggior parte dei layout usa una manciata di tag strutturali e nomi di classe generici. Modifica le variabili una volta e tutta la pagina segue.

Correggi i residui luminosi

Dopo il tema base, alcuni elementi restano bianchi: campi di input, blocchi di codice, tabelle. Spazzali via in una sola regola.

input, textarea, select, button,
pre, code, table, th, td {
  background-color: #20242b !important;
  color: #d6d9de !important;
  border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }

Solo di notte

Se vuoi la modalità scura solo dopo il tramonto, racchiudi la regola in una media query così rispetta la pianificazione del tuo sistema operativo.

@media (prefers-color-scheme: dark) {
  html, body { background-color: #16181c !important; color: #d6d9de !important; }
}

Consigli che fanno risparmiare tempo

• Aggiungi sempre !important — i fogli di stile del sito si caricano dopo i tuoi e sovrascriveranno le regole semplici.
• Inizia con il trucco dell'inversione, poi passa a un tema nativo per i tuoi cinque siti principali.
• Tieni un blocco di variabili :root condiviso così ogni sito usa la stessa palette.
• Testa le barre di scorrimento e i colori di selezione — sono facili da dimenticare e rovinano l'atmosfera.

Vuoi altri punti di partenza? Sfoglia i nostri esempi pronti all'uso o leggi l'articolo complementare su i colori d'accento personalizzati. Nuovo qui? Scarica JustZix e incolla la tua prima regola in meno di un minuto.