prefers-color-scheme: Ciao buio, amico mio

Overhyped or necessity? Scopri tutto sulla modalità Buio e su come supportarla a vantaggio dei tuoi utenti.

Thomas Steiner

Introduzione

Modalità Buio prima di Modalità Buio

Abbiamo chiuso il cerchio con la modalità Buio. Agli albori del personal computing, la modalità Buio non era una questione di scelta, ma un dato di fatto: i monitor dei computer CRT monocromatici funzionavano sparando fasci di elettroni su uno schermo fosforescente e il fosforo utilizzato nei primi CRT era verde. Poiché il testo veniva visualizzato in verde e il resto dello schermo era nero, questi modelli venivano spesso definiti schermi verdi.

I CRT a colori introdotti successivamente mostravano più colori tramite l'uso di fosfori rossi, verdi e blu. Il bianco veniva creato attivando contemporaneamente tutti e tre i fosfori. Con l'avvento di un WYSIWYG più sofisticato desktop publishing, l'idea di far assomigliare il documento virtuale a un foglio di carta fisico è diventata popolare.

È qui che è nata la tendenza di design scuro su bianco, che è stata poi trasferita al primo web basato su documenti. Il primo browser in assoluto, WorldWideWeb (ricorda che CSS non era ancora stato inventato), visualizzava le pagine web in questo modo. Curiosità: il secondo browser in assoluto, Line Mode Browser, un browser basato su terminale, era verde su sfondo scuro. Al giorno d'oggi, le pagine web e le app web sono in genere progettate con testo scuro su sfondo chiaro, un'ipotesi di base che è anche hardcoded nei fogli di stile dello user agent, incluso quello di Chrome.

I tempi dei CRT sono ormai lontani. La fruizione e la creazione di contenuti si sono spostate sui dispositivi mobili che utilizzano schermi LCD retroilluminati o AMOLED a risparmio energetico. Computer, tablet e smartphone più piccoli e trasportabili hanno portato a nuovi modelli di utilizzo. Le attività di svago, come la navigazione sul browser web, la programmazione per divertimento e i giochi di fascia alta, vengono spesso svolte fuori dall'orario di lavoro in ambienti poco illuminati. Le persone usano i loro dispositivi anche a letto di notte. Più le persone utilizzano i loro dispositivi al buio, più l'idea di tornare alle origini del chiaro su scuro diventa popolare.

Perché la modalità Buio

Modalità Buio per motivi estetici

Quando alle persone viene chiesto perché preferiscono o vogliono la modalità Buio, la risposta più comune è che "è più riposante per gli occhi", seguita da "è elegante e bella". Apple, nella sua documentazione per lo sviluppo della modalità Buio, scrive esplicitamente: "La scelta di attivare un aspetto chiaro o scuro è una scelta estetica per la maggior parte degli utenti e potrebbe non essere correlata alle condizioni di luce ambientale".

La modalità Buio come strumento di accessibilità

Ci sono anche persone che hanno effettivamente bisogno della modalità Buio e la usano come un altro strumento di accessibilità, ad esempio gli utenti con problemi di vista. La prima occorrenza di uno strumento di accessibilità di questo tipo che ho trovato è la funzionalità CloseView di System 7, che aveva un pulsante di attivazione/disattivazione per Nero su bianco e Bianco su nero. Sebbene System 7 supportasse i colori, l'interfaccia utente predefinita era ancora in bianco e nero.

Queste implementazioni basate sull'inversione hanno mostrato i loro punti deboli una volta introdotti i colori. La ricerca con gli utenti di Szpiro et al. su come le persone ipovedenti accedono ai dispositivi informatici ha dimostrato che tutti gli utenti intervistati non gradivano le immagini invertite, ma che molti preferivano il testo chiaro su sfondo scuro. Apple asseconda questa preferenza dell'utente con una funzionalità chiamata Inversione smart, che inverte i colori sul display, ad eccezione di immagini, contenuti multimediali e alcune app che utilizzano stili di colore scuri.

Una forma speciale di ipovisione è la sindrome da visione al computer, nota anche come affaticamento visivo digitale, che viene definita come "la combinazione di problemi agli occhi e alla vista associati all'uso di computer (inclusi desktop, laptop e tablet) e altri display elettronici (ad es. smartphone e dispositivi di lettura elettronici)". È stato ipotizzato che l'uso di dispositivi elettronici da parte degli adolescenti, in particolare di notte, comporti un rischio maggiore di una durata del sonno più breve, una latenza di addormentamento più lunga e una maggiore carenza di sonno. Inoltre, è stato ampiamente segnalato che l'esposizione alla luce blu è coinvolta nella regolazione del ritmo circadiano e del ciclo del sonno e che ambienti con luce irregolare possono portare alla privazione del sonno, con possibili effetti sull'umore e sulle prestazioni, secondo una ricerca di Rosenfield. Per limitare questi effetti negativi, è possibile ridurre la luce blu regolando la temperatura di colore del display tramite funzionalità come Night Shift di iOS o Luminosità notturna di Android, oltre a evitare luci intense o irregolari in generale tramite temi scuri o modalità Buio.

Risparmio energetico della modalità Buio sugli schermi AMOLED

Infine, è noto che la modalità Buio consente di risparmiare molta energia sugli schermi AMOLED. I case study di Android incentrati su app Google popolari come YouTube hanno dimostrato che il risparmio energetico può raggiungere il 60%. Il video di seguito fornisce ulteriori dettagli su questi case study e sul risparmio energetico per app.

Attivazione della modalità Buio nel sistema operativo

Ora che ho spiegato perché la modalità Buio è così importante per molti utenti, vediamo come puoi supportarla.

I sistemi operativi che supportano una modalità Buio o un tema scuro in genere hanno un'opzione per attivarli nelle impostazioni. Su macOS X, si trova nella sezione Generali delle preferenze di sistema ed è denominata Aspetto (screenshot). Su Windows 10, si trova nella sezione Colori ed è denominata Scegli il tuo colore (screenshot). Per Android Q, puoi trovarlo in Display come pulsante di attivazione/disattivazione del Tema scuro (screenshot), mentre su iOS 13 puoi modificare l'Aspetto nella sezione Schermo e luminosità delle impostazioni (screenshot).

La query supporti prefers-color-scheme

Un'ultima nozione teorica prima di iniziare. Le query supporti consentono agli autori di testare ed eseguire query su valori o funzionalità dello user agent o del dispositivo di visualizzazione, indipendentemente dal documento di cui viene eseguito il rendering. Vengono utilizzate nella regola CSS @media per applicare in modo condizionale gli stili a un documento e in vari altri contesti e linguaggi, come HTML e JavaScript. Media Queries Level 5 introduce le cosiddette caratteristiche dei contenuti multimediali delle preferenze dell'utente, ovvero un modo per i siti di rilevare il modo preferito dall'utente per visualizzare i contenuti.

La caratteristica multimediale prefers-color-scheme viene utilizzata per rilevare se l'utente ha richiesto alla pagina di utilizzare un tema cromatico chiaro o scuro. Funziona con i seguenti valori:

• light: indica che l'utente ha comunicato al sistema che preferisce una pagina con un tema chiaro (testo scuro su sfondo chiaro).
• dark: indica che l'utente ha comunicato al sistema che preferisce una pagina con un tema scuro (testo chiaro su sfondo scuro).

Supporto della modalità Buio

Scoprire se la modalità Buio è supportata dal browser

Poiché la modalità Buio viene segnalata tramite una query supporti, puoi facilmente verificare se il browser corrente supporta la modalità Buio controllando se la query supporti prefers-color-scheme corrisponde. Tieni presente che non includo alcun valore, ma verifico semplicemente se la query supporti da sola corrisponde.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Al momento della stesura di questo articolo, prefers-color-scheme è supportato sia su computer che su dispositivi mobili (dove disponibile) da Chrome ed Edge a partire dalla versione 76, da Firefox a partire dalla versione 67 e da Safari a partire dalla versione 12.1 su macOS e dalla versione 13 su iOS. Per tutti gli altri browser, puoi consultare il documento Can I use support tables.

Apprendimento delle preferenze di un utente al momento della richiesta

L'intestazione client hint Sec-CH-Prefers-Color-Scheme consente ai siti di ottenere facoltativamente le preferenze della combinazione di colori dell'utente al momento della richiesta, consentendo ai server di incorporare il CSS corretto ed evitare così un flash del tema cromatico errato.

Modalità Buio in pratica

Vediamo infine come funziona in pratica il supporto della modalità Buio. Proprio come in Highlander, con la modalità Buio ne resterà soltanto uno: scuro o chiaro, ma mai entrambi! Perché lo dico? Questo perché questo fatto dovrebbe avere un impatto sulla strategia di caricamento. Non costringere gli utenti a scaricare CSS nel percorso di rendering critico per una modalità che non utilizzano al momento. Per ottimizzare la velocità di caricamento, ho quindi suddiviso il mio CSS per l'app di esempio che mostra i seguenti consigli in pratica in tre parti per rinviare il CSS non critico:

• style.css che contiene regole generiche utilizzate universalmente sul sito.
• dark.css che contiene solo le regole necessarie per la modalità Buio.
• light.css che contiene solo le regole necessarie per la modalità Luce.

Strategia di caricamento

Gli ultimi due, light.css e dark.css, vengono caricati in modo condizionale con una query <link media>. Inizialmente, non tutti i browser supporteranno prefers-color-scheme (rilevabile utilizzando il pattern riportato sopra), che gestisco dinamicamente caricando il file light.css predefinito tramite un elemento <link rel="stylesheet"> inserito in modo condizionale in un minuscolo script incorporato (la modalità Luce è una scelta arbitraria, avrei potuto anche impostare la modalità Scura come esperienza di riserva predefinita). Per evitare di mostrare, anche solo per pochi istanti, contenuti non stilizzati, nascondo i contenuti della pagina finché light.css non viene caricato.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Architettura dei fogli di stile

Sfrutto al massimo le variabili CSS, il che consente al mio style.css generico di essere, appunto, generico, e tutta la personalizzazione della modalità Luce o modalità Buio avviene negli altri due file dark.css e light.css. Di seguito puoi vedere un estratto degli stili effettivi, ma dovrebbe essere sufficiente per trasmettere l'idea generale. Dichiaro due variabili, -⁠-⁠color e -⁠-⁠background-color, che essenzialmente creano un tema di base scuro su chiaro e uno chiaro su scuro.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

Nel mio style.css, utilizzo queste variabili nella regola body { … }. Poiché sono definite nella pseudo-classe CSS :root, un selettore che in HTML rappresenta l'elemento <html> ed è identico al selettore html, ad eccezione della sua specificità, che è più elevata, vengono applicate a cascata, il che mi serve per dichiarare variabili CSS globali.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

Nell'esempio di codice riportato sopra, probabilmente avrai notato una proprietà color-scheme con il valore light dark separato da spazi.

In questo modo, il browser sa quali temi cromatici sono supportati dalla mia app e può attivare varianti speciali del foglio di stile dello user agent, il che è utile, ad esempio, per consentire al browser di visualizzare i campi del modulo con uno sfondo scuro e un testo chiaro, regolare le barre di scorrimento o attivare un colore di evidenziazione sensibile al tema. I dettagli esatti di color-scheme sono specificati in CSS Color Adjustment Module Level 1.

Tutto il resto è solo una questione di definizione delle variabili CSS per gli elementi importanti del mio sito. L'organizzazione semantica degli stili è molto utile quando si lavora con la modalità Buio. Ad esempio, anziché -⁠-⁠highlight-yellow, valuta la possibilità di chiamare la variabile -⁠-⁠accent-color, poiché "yellow" potrebbe non essere effettivamente giallo in modalità Buio o viceversa. Di seguito è riportato un esempio di alcune altre variabili che utilizzo nel mio esempio.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Esempio completo

Nella seguente demo incorporata, puoi vedere l'esempio completo che mette in pratica i concetti precedenti. Prova ad attivare la modalità Buio nelle impostazioni del tuo sistema operativo e osserva come reagisce la pagina.

Caricamento dell'impatto

Quando provi questo esempio, puoi capire perché carico dark.css e light.css tramite query supporti. Prova ad attivare la modalità Buio e ricarica la pagina: i fogli di stile attualmente non corrispondenti vengono comunque caricati, ma con la priorità più bassa, in modo da non competere mai con le risorse necessarie al sito in questo momento.

Reagire alle modifiche della modalità Buio

Come qualsiasi altra modifica alle query supporti, le modifiche alla modalità Buio possono essere sottoscritte tramite JavaScript. Puoi utilizzarlo, ad esempio, per modificare dinamicamente la favicon di una pagina o per modificare il <meta name="theme-color"> che determina il colore della barra degli URL in Chrome. L'esempio completo riportato sopra mostra questa funzionalità in azione. Per visualizzare le modifiche al colore del tema e alla favicon, apri la demo in una scheda separata.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

A partire da Chromium 93 e Safari 15, puoi regolare il colore in base a una query supporti con l'attributo media dell'elemento del colore del tema meta. Verrà scelta la prima che corrisponde. Ad esempio, potresti avere un colore per la modalità Luce e un altro per la modalità Buio. Al momento della stesura di questo articolo, non è possibile definirli nel manifest. Consulta il problema GitHub w3c/manifest#975.

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Debug e test della modalità Buio

Emulazione di prefers-color-scheme in DevTools

Cambiare la combinazione di colori dell'intero sistema operativo può diventare fastidioso molto rapidamente, quindi Chrome DevTools ora ti consente di emulare la combinazione di colori preferita dell'utente in modo che influisca solo sulla scheda attualmente visibile. Apri il menu Comando, inizia a digitare Rendering, esegui il comando Show Rendering e poi modifica l'opzione Emula la funzionalità dei contenuti multimediali del CSS prefers-color-scheme.

Acquisizione di screenshot di prefers-color-scheme con Puppeteer

Puppeteer è una libreria Node.js che fornisce un'API di alto livello per controllare Chrome o Chromium tramite il protocollo DevTools. Con dark-mode-screenshot, forniamo uno script Puppeteer che ti consente di creare screenshot delle tue pagine sia in modalità Buio che Luce. Puoi eseguire questo script una sola volta o, in alternativa, inserirlo nella tua suite di test di integrazione continua (CI).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Best practice per la modalità Buio

Evita il bianco puro

Un piccolo dettaglio che potresti aver notato è che non uso il bianco puro. Per evitare che il testo si illumini e si confonda con i contenuti scuri circostanti, scelgo un bianco leggermente più scuro. Qualcosa come rgb(250, 250, 250) funziona bene.

Ricolorare e scurire le immagini fotografiche

Se confronti i due screenshot di seguito, noterai che non solo il tema principale è cambiato da scuro su chiaro a chiaro su scuro, ma anche l'immagine hero ha un aspetto leggermente diverso. La mia ricerca con gli utenti ha dimostrato che la maggior parte delle persone intervistate preferisce immagini leggermente meno vivide e brillanti quando è attiva la modalità Buio. Questo processo è chiamato ricolorazione.

La ricolorazione può essere ottenuta tramite un filtro CSS sulle mie immagini. Utilizzo un selettore CSS che corrisponde a tutte le immagini che non contengono .svg nell'URL, con l'idea di poter applicare alla grafica vettoriale (icone) un trattamento di ricolorazione diverso rispetto alle immagini (foto). Per saperne di più, consulta il paragrafo successivo. Nota come utilizzo di nuovo una variabile CSS, in modo da poter modificare il filtro in modo flessibile in un secondo momento.

Poiché la ricolorazione è necessaria solo in modalità Buio, ovvero quando dark.css è attiva, non esistono regole corrispondenti in light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

Personalizzazione delle intensità di ricolorazione della modalità Buio con JavaScript

Non tutti sono uguali e le persone hanno esigenze diverse per la modalità Buio. Se mi attengo al metodo di ricolorazione descritto sopra, posso facilmente impostare l'intensità della scala di grigi come preferenza dell'utente che posso modificare tramite JavaScript e, impostando un valore di 0%, posso anche disattivare completamente la ricolorazione. Tieni presente che document.documentElement fornisce un riferimento all'elemento root del documento, ovvero lo stesso elemento a cui posso fare riferimento con la pseudo-classe CSS :root.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Inverti grafica vettoriale e icone

Per la grafica vettoriale, che nel mio caso viene utilizzata come icone a cui faccio riferimento tramite gli elementi <img>, utilizzo un metodo di ricolorazione diverso. Sebbene le ricerche abbiano dimostrato che le persone non amano l'inversione per le foto, questa funziona molto bene per la maggior parte delle icone. Anche in questo caso, utilizzo le variabili CSS per determinare la quantità di inversione nello stato normale e nello stato :hover.

Tieni presente che, ancora una volta, inverto le icone solo in dark.css, ma non in light.css, e che :hover ottiene un'intensità di inversione diversa nei due casi per far apparire l'icona leggermente più scura o leggermente più chiara, a seconda della modalità selezionata dall'utente.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

Utilizza currentColor per gli SVG incorporati

Per le immagini SVG incorporate, anziché utilizzare i filtri di inversione, puoi sfruttare la parola chiave CSS currentColor che rappresenta il valore della proprietà color di un elemento. In questo modo puoi utilizzare il valore color nelle proprietà che non lo ricevono per impostazione predefinita. In pratica, se currentColor viene utilizzato come valore degli attributi fill o stroke di SVG, assume il valore ereditato dalla proprietà color. Ancora meglio: funziona anche per <svg><use href="…"></svg>, quindi puoi avere risorse separate e currentColor verrà comunque applicato nel contesto. Tieni presente che questo funziona solo per gli SVG incorporati o <use href="…">, ma non per gli SVG a cui viene fatto riferimento come src di un'immagine o in qualche modo tramite CSS. Puoi vedere questa applicazione nella demo di seguito.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Transizioni fluide tra le modalità

Il passaggio dalla modalità Buio alla modalità Luce o viceversa può essere reso più fluido grazie al fatto che sia color che background-color sono proprietà CSS animabili. Creare l'animazione è semplice: basta dichiarare due transition per le due proprietà. L'esempio seguente illustra l'idea generale, che puoi provare dal vivo nella demo.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Direzione artistica con modalità Buio

Sebbene per motivi di prestazioni di caricamento in generale consigli di lavorare esclusivamente con prefers-color-scheme nell'attributo media degli elementi <link> (anziché in linea nei fogli di stile), esistono situazioni in cui potresti voler lavorare con prefers-color-scheme direttamente in linea nel codice HTML. La direzione artistica è una di queste situazioni. Sul web, la direzione artistica si occupa dell'aspetto visivo complessivo di una pagina e del modo in cui comunica visivamente, stimola gli stati d'animo, mette in contrasto le caratteristiche e si rivolge psicologicamente a un pubblico di destinazione.

Con la modalità Buio, spetta al designer decidere qual è l'immagine migliore in una determinata modalità e se la ricolorazione delle immagini è forse non sufficiente. Se utilizzato con l'elemento <picture>, l'attributo <source> dell'immagine da mostrare può essere reso dipendente dall'attributo media. Nell'esempio seguente, mostro l'emisfero occidentale per la modalità Buio e l'emisfero orientale per la modalità Luce o quando non viene specificata alcuna preferenza, impostando l'emisfero orientale come predefinito in tutti gli altri casi. Questo è ovviamente solo a scopo illustrativo. Attiva o disattiva la modalità Buio sul dispositivo per vedere la differenza.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Modalità Buio, ma con un'opzione di disattivazione

Come accennato nella sezione Perché la modalità Buio, la modalità Buio è una scelta estetica per la maggior parte degli utenti. Di conseguenza, alcuni utenti potrebbero preferire l'UI del sistema operativo in modalità Buio, ma preferire comunque visualizzare le pagine web nel modo in cui sono abituati a vederle. Un ottimo approccio consiste nell'aderire inizialmente al segnale inviato dal browser tramite prefers-color-scheme, ma poi consentire facoltativamente agli utenti di eseguire l'override dell'impostazione a livello di sistema.

L'elemento personalizzato <dark-mode-toggle>

Puoi creare il codice autonomamente, ma puoi anche utilizzare un elemento personalizzato (componente web) già pronto che ho creato proprio per questo scopo. Si chiama <dark-mode-toggle> e aggiunge un pulsante di attivazione/disattivazione (modalità Buio: on/off) o un selettore di temi (tema: chiaro/scuro) alla tua pagina che puoi personalizzare completamente. La demo di seguito mostra l'elemento in azione (oh, e l'ho anche 🤫 inserito silenziosamente in tutti gli altri esempi sopra).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

Prova a fare clic o a toccare i controlli della modalità Buio nell'angolo in alto a destra della seguente demo. Se selezioni la casella di controllo nel terzo e nel quarto controllo, vedrai che la selezione della modalità viene memorizzata anche quando ricarichi la pagina. In questo modo, i visitatori possono mantenere il sistema operativo in modalità Buio, ma visualizzare il tuo sito in modalità Luce o viceversa.

Conclusioni

Lavorare con la modalità Buio e supportarla è divertente e apre nuove strade di progettazione. Per alcuni visitatori, può fare la differenza tra non essere in grado di gestire il tuo sito ed essere un utente soddisfatto. Ci sono alcune insidie e sono necessari test accurati, ma la modalità Buio è sicuramente un'ottima opportunità per dimostrare che tieni a tutti i tuoi utenti. Le best practice menzionate in questo post e gli strumenti di supporto come l'elemento personalizzato <dark-mode-toggle> dovrebbero darti fiducia nella tua capacità di creare un'esperienza straordinaria con la modalità Buio. Fammi sapere su Twitter cosa crei e se questo post è stato utile o se hai suggerimenti per migliorarlo. Grazie per l'attenzione. 🌒

Link correlati

Risorse per la query supporti prefers-color-scheme:

• Pagina Chrome Platform Status
• Bug di Chromium
• Specifiche di query supporti Level 5

Risorse per il meta tag color-scheme e la proprietà CSS:

• La proprietà CSS color-scheme e il meta tag
• Pagina Chrome Platform Status
• Bug di Chromium
• Specifica CSS Color Adjustment Module Level 1
• Problema di GitHub del CSS WG relativo al meta tag e alla proprietà CSS
• Problema di GitHub WHATWG HTML per il meta tag

Link generali alla modalità Buio:

• Material Design - Tema scuro
• Modalità Buio in Web Inspector
• Dark Mode Support in WebKit
• Apple Human Interface Guidelines—Dark Mode

Articoli di ricerca di base per questo post:

• What Does Dark Mode's "supported-color-schemes" Actually Do? 🤔
• E oscurità sia! 🌚 Forse…
• Ricolorazione per la modalità Buio

Ringraziamenti

La funzionalità dei contenuti multimediali prefers-color-scheme, la proprietà CSS color-scheme e il meta tag correlato sono il risultato del lavoro di implementazione di 👏 Rune Lillesveen. Rune è anche co-editor della specifica CSS Color Adjustment Module Level 1. Vorrei 🙏 ringraziare Lukasz Zbylut, Rowan Merewood, Chirag Desai e Rob Dodson per le loro recensioni approfondite di questo articolo. La strategia di caricamento è un'idea di Jake Archibald. Emilio Cobos Álvarez mi ha indicato il metodo di rilevamento corretto di prefers-color-scheme. Il suggerimento con gli SVG di riferimento e currentColor è stato fornito da Timothy Hatcher. Infine, ringrazio i numerosi partecipanti anonimi ai vari studi sugli utenti che hanno contribuito a definire i consigli di questo articolo.