Gradienti in modalità scura: mantenere la profondità senza abbagliare

I gradienti in dark mode danno il meglio quando hanno colori propri invece di riusare quelli del tema chiaro. Su un fondo scuro l’occhio si adatta e ogni colore saturo sembra più luminoso, quindi un gradiente che sul bianco era calmo comincia ad abbagliare. Abbassa il chroma, limita il colore vivace alle aree piccole, tingi il fondo invece di usare il nero puro e cambia i valori con prefers-color-scheme o light-dark(). La profondità resta; l’abbaglio se ne va.

Perché i gradienti del tema chiaro falliscono al buio

Quando la pagina diventa scura cambiano tre cose. Le grandi aree luminose diventano la cosa più luminosa della stanza, e si leggono come abbaglio e non come colore. Le ombre smettono di funzionare, quindi i gradienti che si affidavano ai bordi scuriti per la profondità la perdono. E i passaggi tra toni scuri si vedono più facilmente, quindi i gradienti sottili cominciano a creare bande. Design in modalità scura tratta il tema nel complesso; questa pagina parla dei gradienti.

Cinque regole per i gradienti in dark mode

1. 1

   Tingi il fondo

   Usa un quasi nero che tende alla tua tonalità, come #0b0a14 per i brand viola, invece di #000000. Il nero puro fa sembrare il colore incollato sopra.

2. 2

   Abbassa il chroma

   Riduci la saturazione di circa un terzo per le aree ampie. In OKLCH, mantieni la tonalità e riduci il valore C.

3. 3

   Rimpicciolisci la parte luminosa

   Lascia che il colore vivace occupi un angolo o un bagliore, e che gran parte della superficie resti vicina al fondo.

4. 4

   Solleva, non ombreggiare

   Mostra l’elevazione con superfici leggermente più chiare e gradienti che si schiariscono verso l’alto, dato che le ombre scompaiono sui fondi scuri.

5. 5

   Aggiungi grana

   Un rumore fine rompe i gradini visibili nelle sfumature scure. Gradienti granulosi ha la ricetta.

Cambiare i gradienti con prefers-color-scheme

Salva nelle proprietà personalizzate i colori del gradiente, non interi gradienti. Così il tema scuro deve solo ridefinire i colori, e ogni componente che li usa si aggiorna. È lo stesso schema descritto in variabili CSS per i temi.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Nota che i bagliori scuri sono più profondi, non più luminosi. Su un fondo scuro un colore deve essere appena più chiaro di ciò che lo circonda per leggersi come luce.

Usare light-dark()

La funzione light-dark() restituisce il primo colore in uno schema chiaro e il secondo in uno scuro. Richiede color-scheme: light dark sull’elemento o su un antenato, ed è supportata in Chrome, Edge, Safari e Firefox attuali. Tiene entrambi i valori su una riga, il che rende più facile rivedere una palette.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Supportare un interruttore manuale del tema

Molti siti permettono di sovrascrivere l’impostazione di sistema. Metti la scelta sull’elemento radice e limita le variabili a quella. La media query gestisce il valore predefinito; l’attributo vince quando qualcuno sceglie.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Regolare un gradiente per la dark mode

Ecco lo stesso gradiente del brand regolato stop per stop. Lavorare in OKLCH lo rende prevedibile, perché luminosità e chroma sono numeri separati; OKLCH spiegato mostra perché.

Testo sui gradienti scuri

Il testo chiaro su un gradiente scuro di solito ha contrasto in abbondanza, ma controllalo dove il gradiente è più luminoso, non dove è più scuro. Un titolo in #e2e8f0 su #0b0a14 è ben sopra il 4,5:1 che le WCAG chiedono per il testo corrente; lo stesso titolo su un bagliore viola acceso potrebbe non esserlo. Evita anche il testo corrente bianco puro su quasi nero: un contrasto altissimo causa alonatura per alcuni lettori, quindi un bianco sporco tenue è più gentile. Contrasto dei colori e accessibilità ha i numeri.

Per altre palette scure, sfondi a gradiente scuro ne ha un set da copiare. E per post social e slide, dove non puoi testare a mano ogni riga, Inchiostro automatico di Gradiently sceglie testo chiaro o scuro per riga dalla palette del Mark, e il Mark sposta la sua zona più calma dietro le parole, così un design scuro non mette mai un titolo sul suo bagliore più luminoso.