Nessun commento

Il tema oscuro

Uno screenshot che mostra il tema chiaro e quell scuro

Nelle prime due settimane dopo il LASEK, i miei occhi non andavano d’accordo con testo e schermi. La cosa era prevista, quindi ho evitato sforzi inutili e fatto dell’altro. Due cose che mi hanno aiutato però sono state aumentare la dimensione del testo, direttamente o via Magnifier, ed attivare il dark mode a livello di sistema. Con mia sopresa, la maggior parte dei programmi ed un gran numero di siti web ha fatto la cosa giusta e si è adattato alla mia preferenza. Alcuni programmi hanno chiesto, altri l’hanno fatto direttamente, ma sono rimasti ben pochi sfondi bianchi. Uno di questi però mi ha crucciato più di altri: quello di questo sito.

Ieri, gli occhi ormai più rilassati, ho deciso di colmare questa lacuna, ed ho implementato un oscuro tema per queste pagine. Riassumo qua i passi.

Prima un tema, poi due

Per poter avere un tema scuro, bisogna prima di tutto avere un “tema”, un gruppo di colori usati in modo consistente in tutto in CSS. Ho quindi raccolto tutti i colori, unificandone alcuni molto simili, e li ho elencati all’inizio del foglio di stile, sotto :root, la radice di tutta la pagina, visto che l’intenzione era di usarli ovunque. I nomi sono una mia scelta, e non hanno alcun effetto.

:root {
  --text-color: #444;
  --link-color: #56a;
  --link-border-color: #dde0ee;
  --background-color: #fcfbfa;
}

Nel resto delle regole, ho aggiunto riferimenti a queste variabili, lasciando i colori originali al loro posto.

a {
  color: #56a;
  color: var(--link-color);
}

Se un browser non dovesse supportare le custom properties del CSS, il secondo attributo verrebbe ignorato, lasciando attivo il valore di default settato sopra—il tema chiaro.

Una volta pronto il tema di default, ho duplicato le definizioni infilandole in una media query che controlla la configurazione del browser, ed ho aggiornato i colori.

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ccd;
    --link-color: #909cd0;
    --link-border-color: #575c77;
    --background-color: #2d3345;
  }
}

Trovare i colori giusti richiede un po' di tempo: non basta invertire il tema precedente. Il tema a cui sono arrivato alla fine è più blu della sua controparte chiara, ma ne sono soddisfatto. L'ho costruito un colore alla volta, via Web Inspector—strumento essenziale, ogni singolo giorno, foss'anche per comprare il biglietto del treno.

Avvisiamo il browser

Una volta preparati i colori, ci siamo. Servono ancora due pezzi per avvisare il browser che i temi esistono. In CSS si usa l'attributo color-scheme:

:root {
  color-scheme: light dark;
  [...]

È utile duplicare l'informazione nella pagina HTML, così che il browser sappia quale tema usare prima ancora di caricare il CSS. Questo evita quei fastidiosi lampi di bianco causati da un caricamento un po' più lento del previsto.

<head>
  <meta name="supported-color-schemes" content="light dark" />

Aggiustiamo le foto

Con uno sfondo scuro le foto diventano un po' accecanti. Ho adattato il suggerimento di aggiungere un filtro per renderle meno luminose, anche questo via CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.9) contrast(1.1);
  }
}

Fine, il sito ora si adatta al tema scelto a livello di browser o sistema operativo. Tornerò presto al chiaro, che resta il mio preferito, ma sono contento di sapere che queste pagine sono ora più facili da leggere per chi ha preferenze diverse.

Aggiungi un commento