prefers-color-scheme: Ciao buio, amico mio

Esagerazione o necessità? Scopri tutto sulla modalità Buio e 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 dell'informatica personale, la modalità Buio non era una scelta, ma un dato di fatto: i monitor per 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 chiamati schermi verdi.

I CRT a colori introdotti successivamente visualizzavano più colori grazie all'utilizzo di fosfori rossi, verdi e blu. Hanno creato il bianco attivando contemporaneamente tutti e tre i fosfori. Con l'avvento di WYSIWYG più sofisticati di pubblicazione assistita da computer, l'idea di rendere il documento virtuale simile a un foglio di carta fisico è diventata popolare.

È qui che è iniziata la tendenza del design nero su bianco, che è stata poi ripresa nel primo web basato su documenti. Il primo browser in assoluto, WorldWideWeb (ricorda, il 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 presupposto di base codificato anche nei fogli di stile dello user agent, incluso Chrome.

I tempi dei CRT sono finiti da un pezzo. Il consumo e la creazione di contenuti si sono spostati sui dispositivi mobili che utilizzano schermi LCD o AMOLED a risparmio energetico. Computer, tablet e smartphone più piccoli e trasportabili hanno portato a nuovi modelli di utilizzo. Attività di svago come navigazione web, programmazione per divertimento e giochi di fascia alta si svolgono spesso dopo l'orario di lavoro in ambienti poco illuminati. Le persone usano i propri dispositivi anche a letto di notte. Più persone usano i propri dispositivi al buio, più l'idea di tornare alle origini del testo chiaro su sfondo scuro diventa popolare.

Perché la modalità Buio

Modalità Buio per motivi estetici

Quando viene chiesto perché preferiscono la modalità Buio, la risposta più popolare è che "è più riposante per gli occhi", seguita da "è elegante e bella". Apple nella sua documentazione per gli sviluppatori 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 illuminazione ambientale".

Modalità Buio come strumento di accessibilità

Ci sono anche persone che hanno bisogno della modalità Buio e la utilizzano come un altro strumento di accessibilità, ad esempio, gli utenti ipovedenti. Il primo esempio di strumento di accessibilità 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 il colore, l'interfaccia utente predefinita era ancora in bianco e nero.

Queste implementazioni basate sull'inversione hanno mostrato le loro debolezze una volta introdotto il colore. La ricerca sugli utenti di Szpiro et al. su come le persone con problemi di vista accedono ai dispositivi informatici ha dimostrato che tutti gli utenti intervistati non apprezzavano le immagini invertite, ma che molti preferivano il testo chiaro su sfondo scuro. Apple tiene conto di 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 scuro.

Una forma speciale di ipovisione è la sindrome da visione artificiale, nota anche come affaticamento visivo digitale, che è definita come "la combinazione di problemi di vista e oculari associati all'uso di computer (inclusi desktop, laptop e tablet) e altri display elettronici (ad es. smartphone e dispositivi di lettura elettronici)". È stato proposto che l'uso di dispositivi elettronici da parte degli adolescenti, in particolare di notte, comporti un aumento del rischio di durata del sonno più breve, latenza di insorgenza del sonno più lunga e aumento della carenza di sonno. Inoltre, l'esposizione alla luce blu è stata ampiamente segnalata come coinvolta nella regolazione del ritmo circadiano e del ciclo del sonno e ambienti luminosi irregolari possono portare a privazione del sonno, con possibili effetti sull'umore e sulle prestazioni delle attività, secondo la ricerca di Rosenfield. Per limitare questi effetti negativi, può essere utile 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 su Android incentrati su app Google popolari come YouTube hanno dimostrato che il risparmio energetico può arrivare fino al 60%. Il video che segue fornisce maggiori dettagli su questi case study e sul risparmio energetico per app.

Attivare la 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 attivarla da qualche parte nelle impostazioni. Su macOS X, si trova nella sezione Generali delle preferenze di sistema e si chiama Aspetto (screenshot). Su Windows 10, si trova nella sezione Colori e si chiama Scegli il colore (screenshot). Per Android Q, puoi trovarlo in Display come interruttore di attivazione/disattivazione del tema scuro (screenshot). Su iOS 13, puoi modificare l'aspetto nella sezione Display e luminosità delle impostazioni (screenshot).

Query supporti prefers-color-scheme

Un ultimo concetto teorico prima di iniziare. Le media query consentono agli autori di testare ed eseguire query su valori o funzionalità dell'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 funzionalità multimediali per le preferenze dell'utente, ovvero un modo per i siti di rilevare la modalità preferita dall'utente per visualizzare i contenuti.

La funzionalità multimediale prefers-color-scheme viene utilizzata per rilevare se l'utente ha richiesto che la pagina utilizzi un tema cromatico chiaro o scuro. Funziona con i seguenti valori:

• light: Indica che l'utente ha comunicato al sistema di preferire una pagina con un tema chiaro (testo scuro su sfondo chiaro).
• dark: Indica che l'utente ha comunicato al sistema di preferire 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 media query, puoi controllare facilmente se il browser corrente supporta la modalità Buio verificando se la media query prefers-color-scheme corrisponde. Nota che non includo alcun valore, ma verifico solo se la media query corrisponde.

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

Al momento della stesura, prefers-color-scheme è supportato sia su computer che su dispositivi mobili (se 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.

Informazioni sulle preferenze di un utente al momento della richiesta

L'intestazione dell'hint client 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 quindi un flash del tema cromatico errato.

Modalità Buio in pratica

Vediamo infine come appare in pratica il supporto della modalità Buio. Proprio come con Highlander, con la modalità Buio ne rimarrà soltanto una: scura o chiara, ma mai entrambe. Perché lo menziono? Perché questo fatto dovrebbe influire sulla strategia di caricamento. Non forzare gli utenti a scaricare CSS nel percorso di rendering critico per una modalità che non utilizzano attualmente. Per ottimizzare la velocità di caricamento, ho suddiviso il CSS per l'app di esempio che mostra in pratica i seguenti consigli in tre parti per rimandare 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à Buio.

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 precedente), che gestisco in modo dinamico caricando il file light.css predefinito tramite un elemento <link rel="stylesheet"> inserito in modo condizionale in uno script incorporato minuscolo (light è una scelta arbitraria, avrei potuto anche impostare dark come esperienza di fallback predefinita). Per evitare un flash di contenuti non stilizzati, nascondo i contenuti della pagina finché light.css non è stato 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 del foglio di stile

Utilizzo al massimo le variabili CSS, in questo modo il mio style.css generico può essere, beh, generico, e tutta la personalizzazione della modalità Luce o 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 creano essenzialmente 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, tranne per il fatto che la sua specificità è maggiore, vengono applicate a cascata, il che mi serve per dichiarare le 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.

Indica al browser quali temi di colore supporta la mia app e gli consente di attivare varianti speciali del foglio di stile dell'agente utente, il che è utile, ad esempio, per consentire al browser di eseguire il rendering dei campi del modulo con uno sfondo scuro e un testo chiaro, regolare le barre di scorrimento o per attivare un colore di evidenziazione sensibile al tema. I dettagli esatti di color-scheme sono specificati nel modulo di aggiustamento del colore CSS di livello 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é "giallo" potrebbe non essere effettivamente giallo in modalità Buio o viceversa. Di seguito è riportato un esempio di 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

Nell'incorporamento di Glitch riportato di seguito, puoi vedere l'esempio completo che mette in pratica i concetti illustrati sopra. Prova ad attivare la modalità Buio nelle impostazioni del sistema operativo e vedi come reagisce la pagina.

Caricamento dell'impatto

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

Reagire alle modifiche della modalità Buio

Come qualsiasi altra modifica della media query, è possibile iscriversi alle modifiche della modalità Buio tramite JavaScript. Puoi utilizzarlo, ad esempio, per modificare dinamicamente la favicon di una pagina o cambiare il <meta name="theme-color"> che determina il colore della barra degli URL in Chrome. L'esempio completo riportato sopra mostra questo 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 media query con l'attributo media dell'elemento colore tema meta. Verrà selezionata la prima corrispondenza. Ad esempio, potresti avere un colore per la modalità Luce e un altro per la modalità Buio. Al momento della stesura, non puoi definirli nel manifest. Consulta il problema di 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 rapidamente fastidioso, quindi Chrome DevTools ora ti consente di emulare la combinazione di colori preferita dell'utente in modo da influire solo sulla scheda attualmente visibile. Apri il menu Comando, inizia a digitare Rendering, esegui il comando Show Rendering e poi modifica l'opzione Emula prefers-color-scheme della funzionalità dei contenuti multimediali del CSS.

Acquisizione di screenshot 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 oppure inserirlo nella 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. Invece, per evitare l'effetto alone e la fuoriuscita di luce rispetto ai contenuti scuri circostanti, scelgo un bianco leggermente più scuro. Un esempio è rgb(250, 250, 250).

Ricolorare e scurire le immagini fotografiche

Se confronti i due screenshot riportati 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 sugli utenti ha dimostrato che la maggior parte delle persone intervistate preferisce immagini leggermente meno vivaci e brillanti quando è attiva la modalità Buio. Mi riferisco a questa operazione come 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 hanno .svg nel loro URL, l'idea è di poter dare alla grafica vettoriale (icone) un trattamento di ricolorazione diverso rispetto alle mie immagini (foto). Scopri di più nel prossimo paragrafo. 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 è attivo, non esistono regole corrispondenti in light.css.

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

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

Personalizzare le intensità di ricolorazione della modalità Buio con JavaScript

Non tutti sono uguali e le persone hanno esigenze diverse per quanto riguarda la modalità Buio. Attenendomi al metodo di ricolorazione descritto sopra, posso facilmente fare in modo che l'intensità del bianco e nero sia una 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 radice 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);

Invertire la grafica vettoriale e le icone

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

Nota come inverto le icone solo in dark.css, ma non in light.css, e come :hover riceve 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 in linea

Per le immagini SVG incorporate, anziché utilizzare 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. Se currentColor viene utilizzato come valore degli attributi SVG fill o stroke, il valore viene invece ereditato dalla proprietà color. Ancora meglio: funziona anche per <svg><use href="…"></svg>, in modo da avere risorse separate e currentColor verrà comunque applicato nel contesto. Tieni presente che questa opzione funziona solo per gli SVG in linea 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 questo esempio 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 come 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 utilizzare esclusivamente prefers-color-scheme nell'attributo media degli elementi <link> (anziché in linea nei fogli di stile), ci sono situazioni in cui potresti voler utilizzare 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 di come comunica visivamente, stimola gli stati d'animo, mette in contrasto le caratteristiche e fa appello psicologicamente a un pubblico di destinazione.

Con la modalità Buio, spetta al progettista decidere qual è l'immagine migliore in una determinata modalità e se la ricolorazione delle immagini non è abbastanza buona. Se utilizzato con l'elemento <picture>, il <source> dell'immagine da mostrare può dipendere dall'attributo media. Nell'esempio riportato di seguito, mostro l'emisfero occidentale per la modalità Buio e l'emisfero orientale per la modalità Chiaro o quando non viene specificata alcuna preferenza, l'emisfero orientale viene impostato come predefinito in tutti gli altri casi. Naturalmente, questo è solo a scopo illustrativo. Attiva o disattiva la modalità Buio sul dispositivo per notare 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 aggiungi una disattivazione

Come accennato nella sezione Perché la modalità Buio sopra, la modalità Buio è una scelta estetica per la maggior parte degli utenti. Di conseguenza, alcuni utenti potrebbero preferire l'interfaccia utente del sistema operativo in modalità Buio, ma preferire comunque visualizzare le pagine web nel modo in cui sono abituati. Un ottimo pattern è quello di rispettare inizialmente il segnale inviato dal browser tramite prefers-color-scheme, ma di consentire poi facoltativamente agli utenti di ignorare l'impostazione a livello di sistema.

L'elemento personalizzato <dark-mode-toggle>

Puoi ovviamente creare il codice da solo, ma puoi anche utilizzare un elemento personalizzato (componente web) già pronto che ho creato appositamente per questo scopo. Si chiama <dark-mode-toggle> e aggiunge alla tua pagina un pulsante di attivazione/disattivazione (modalità Buio: on/off) o un selettore di temi (tema: chiaro/scuro) che puoi personalizzare completamente. La demo seguente mostra l'elemento in azione (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 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 come 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 per la progettazione. Per alcuni visitatori, può fare la differenza tra non riuscire a gestire il tuo sito ed essere un utente felice. Esistono 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 helper come l'elemento personalizzato <dark-mode-toggle> dovrebbero darti la sicurezza di poter creare un'esperienza straordinaria in modalità Buio. Fammi sapere su Twitter cosa crei e se questo post è stato utile o anche suggerimenti per migliorarlo. Grazie per l'attenzione. 🌒

Link correlati

Risorse per la query supporti prefers-color-scheme:

• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Media Queries Level 5 spec

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

• La proprietà CSS color-scheme e il meta tag
• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifica del modulo di regolazione del colore CSS di livello 1
• Problema di GitHub del gruppo di lavoro CSS per il meta tag e la proprietà CSS
• Problema di GitHub WHATWG per il meta tag HTML

Link generali alla modalità Buio:

• Material Design - Tema scuro
• Modalità Buio in Web Inspector
• Supporto della modalità Buio in WebKit
• Apple Human Interface Guidelines - Dark Mode

Articoli di ricerca di base per questo post:

• Cosa fa effettivamente "supported-color-schemes" della modalità Buio? 🤔
• E luce non sia! 🌚 Forse…
• Ricolorazione per la modalità Buio

Ringraziamenti

La funzionalità dei contenuti multimediali prefers-color-scheme, la proprietà CSS color-scheme e il metatag correlato sono il risultato dell'implementazione di 👏 Rune Lillesveen. Rune è anche co-editor della specifica del modulo di aggiustamento del colore CSS di livello 1. Vorrei ringraziare 🙏 Lukasz Zbylut, Rowan Merewood, Chirag Desai, e Rob Dodson per le loro revisioni approfondite di questo articolo. La strategia di caricamento è stata ideata da Jake Archibald. Emilio Cobos Álvarez mi ha indicato il metodo di rilevamento prefers-color-scheme corretto. Il suggerimento con i file SVG e currentColor a cui viene fatto riferimento è stato fornito da Timothy Hatcher. Infine, ringrazio i numerosi partecipanti anonimi ai vari studi sugli utenti che hanno contribuito a definire i consigli riportati in questo articolo.