prefers-color-scheme: Ciao buio, amico mio

Sopravvalutato o necessario? Scopri tutto sulla modalità Buio e su come supportarla a vantaggio dei tuoi utenti.

Thomas Steiner

Introduzione

Modalità scura precedente alla 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 era un dato di fatto: i monitor dei computer CRT monocromatici funzionavano con fasci di elettroni sparavano su uno schermo fosforescente e il fosforo utilizzato nei primi CRT era verde. Poiché il testo era visualizzato in verde e il resto dello schermo era nero, questi modelli erano spesso indicati come schermi verdi.

I CRT a colori introdotti successivamente mostravano più colori tramite l'uso di fosfori rossi, verdi e blu. Hanno creato il bianco attivando contemporaneamente tutti e tre i fosfori. Con l'avvento di sistemi di pubblicazione di desktop più sofisticati, WYSIWYG, si è diffusa l'idea di rendere il documento virtuale simile a un foglio di carta fisico.

È qui che è iniziata la tendenza del bianco su nero come design, che è stata poi trasferita al primo web basato su documenti. Il primo browser in assoluto, WorldWideWeb (ricorda, CSS non è stato ancora inventato), mostrava le pagine web in questo modo. Curiosità: il secondo browser in assoluto, il browser in modalità linea, un browser basato su terminale, era verde su 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 che è anche hardcoded negli stili delle stylesheet dello user agent, incluso quello di Chrome.

I tempi dei CRT sono finiti da tempo. Il consumo e la creazione di contenuti si sono spostati sui dispositivi mobili che utilizzano schermi LCD con retroilluminazione o AMOLED a risparmio energetico. Computer, tablet e smartphone più piccoli e trasportabili hanno portato a nuovi pattern di utilizzo. Attività ricreative come la navigazione web, la programmazione per divertimento e i giochi di fascia alta spesso si svolgono dopo l'orario di lavoro in ambienti poco illuminati. Le persone usano i dispositivi sul letto anche di notte. Più persone usano 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 viene chiesto alle persone perché preferiscono o vogliono la modalità Buio, la risposta più comune è "è più facile per gli occhi", seguita da "è elegante e bella". Nella sua documentazione per gli sviluppatori relativa alla modalità Buio, Apple scrive esplicitamente: "La scelta di attivare un'interfaccia chiara o scura è estetica per la maggior parte degli utenti e potrebbe non essere correlata alle condizioni di illuminazione ambientale".

La modalità Buio come strumento di accessibilità

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

Queste implementazioni basate sull'inversione hanno dimostrato le loro debolezze una volta introdotto il colore. La ricerca condotta da Szpiro et al. sugli strumenti di calcolo utilizzati dalle persone con disabilità visive ha dimostrato che a tutti gli utenti intervistati non piacevano le immagini invertite, ma molti preferivano il testo chiaro su sfondo scuro. Apple soddisfa 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 usano stili di colore scuro.

Una forma speciale di bassa visibilità è la sindrome da visione al computer, nota anche come affaticamento degli occhi da dispositivi digitali, che viene definita come "la combinazione di problemi agli occhi e alla vista associati all'uso di computer (inclusi computer, laptop e tablet) e altri display elettronici (ad es. smartphone e dispositivi di lettura elettronici)". È stato suggerito che l'uso di dispositivi elettronici da parte degli adolescenti, in particolare di notte, porti a un aumento del rischio di durata del sonno più breve, latenza dell'inizio del sonno più lunga e aumento della carenza di sonno. Inoltre, è stato ampiamente sperimentato che l'esposizione alla luce blu sia coinvolta nella regolazione del ritmo circodiano e del ciclo del sonno, e ambienti luminosi irregolari possono portare alla carenza di sonno, influenzando potenzialmente umore e attività, secondo una ricerca di Rosenfield. Per limitare questi effetti negativi, puoi ridurre la luce blu regolando la temperatura di colore del display tramite funzionalità come Night Shift di iOS o Luce notturna di Android, nonché evitando in generale luci luminose o irregolari tramite temi scuri o modalità scura.

Risparmio energetico in modalità Buio sugli schermi AMOLED

Infine, è noto che la modalità scura consente di risparmiare molto di 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 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à scura o un tema scuro solitamente dispongono di un'opzione per attivarla nelle impostazioni. Su macOS X, si trova nella sezione Generale delle preferenze di sistema e si chiama Aspetto (screenshot), mentre su Windows 10 si trova nella sezione Colori e si chiama Scegli il tuo colore (screenshot). Su Android Q, puoi trovarlo in Display sotto forma di pulsante di attivazione/disattivazione Tema scuro (screenshot), mentre su iOS 13 puoi modificare l'Aspetto nella sezione Display e luminosità delle impostazioni (screenshot).

La query multimediale prefers-color-scheme

Un'ultima teoria prima di iniziare. Le query sui media consentono agli autori di testare e eseguire query sui valori o sulle funzionalità dell'agente utente o del dispositivo di visualizzazione, indipendentemente dal documento visualizzato. Vengono utilizzate nella regola @media CSS per applicare in modo condizionale gli stili a un documento e in vari altri contesti e linguaggi, come HTML e JavaScript. Media Queries 5 introduce le cosiddette funzionalità multimediali per le preferenze dell'utente, ovvero un modo per i siti di rilevare il modo preferito dall'utente per visualizzare i contenuti.

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

• light: indica che l'utente ha informato il sistema che preferisce una pagina con tema chiaro (testo scuro su sfondo chiaro).
• dark: indica che l'utente ha comunicato al sistema di preferire una pagina con 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 multimediale, puoi facilmente verificare se il browser corrente supporta questa modalità controllando se la query multimediale prefers-color-scheme corrisponde. Nota che non includo alcun valore, ma controlli solo 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 (se disponibili) da Chrome e 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 l'articolo Posso utilizzare le tabelle di assistenza.

Conoscere le preferenze di un utente al momento della richiesta

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

Modalità Buio in pratica

Vediamo finalmente come funziona la modalità Buio nella pratica. Proprio come con Highlander, con la modalità Buio può esistere solo una: luce o Buio, ma mai entrambe. Perché lo menzioni? 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 al momento. Per ottimizzare la velocità di caricamento, ho quindi suddiviso il CSS per l'app di esempio che mostra i seguenti consigli pratici in tre parti per rimandare il CSS non critico:

• style.css contenente 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

I due campi finali, 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 sopra), che gestisco in modo dinamico caricando il file light.css predefinito tramite un elemento <link rel="stylesheet"> inserito in modo condizionale in uno script in linea minuscolo (la modalità chiara è una scelta arbitraria, avrei potuto anche impostare la modalità scura come esperienza di riserva predefinita). Per evitare un lampo di contenuti senza stile, nascosto i contenuti della pagina fino al caricamento di light.css.

<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

Sfrutto al massimo le variabili CSS, in modo che il mio style.css generico sia, appunto, generico, e tutta la personalizzazione della modalità Luce o Buio avvenga 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 riferimento scuro su chiaro e 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 definiti sulla pseudoclasse CSS :root, un selettore che in HTML rappresenta l'elemento <html> ed è identico al selettore html, tranne per il fatto che la sua specificità è superiore, vengono applicati in 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.

In questo modo, il browser viene informato dei temi a colori supportati dalla mia app e può attivare varianti speciali dello stile foglio dell'agente utente, utile ad esempio per consentire al browser di visualizzare i campi dei moduli con uno sfondo scuro e un testo chiaro, regolare le barre di scorrimento o attivare un colore di evidenziazione basato sul tema. I dettagli esatti di color-scheme sono specificati in Livello 1 del modulo di aggiustamento dei colori CSS.

Tutto il resto è solo una questione di definizione delle variabili CSS per gli elementi importanti del mio sito. Organizzare semanticamente gli stili è molto utile quando si lavora con la modalità oscura. Ad esempio, anziché -⁠-⁠highlight-yellow, ti consigliamo di chiamare la variabile-⁠-⁠accent-color, poiché "giallo" potrebbe non essere giallo in modalità oscura 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

Nel seguente codice di incorporamento di Glitch, puoi vedere l'esempio completo che mette in pratica i concetti riportati sopra. Prova ad attivare e disattivare la modalità oscura nelle impostazioni del tuo sistema operativo e osserva la reazione della pagina.

Impatto del caricamento

Quando esamini questo esempio, puoi vedere perché carico dark.css e light.css tramite query sui media. Prova ad attivare/disattivare la modalità oscura e ricarica la pagina: i fogli di stile attualmente non corrispondenti vengono comunque caricati, ma con la priorità più bassa, in modo che non entrino mai in concorrenza con le risorse necessarie al sito in questo momento.

Reazioni alle modifiche della modalità Buio

Come per qualsiasi altra modifica alle query supporti, le modifiche alla modalità Buio possono essere sottoscritte tramite JavaScript. Puoi utilizzarla, ad esempio, per cambiare dinamicamente il favicon di una pagina o il <meta name="theme-color"> che determina il colore della barra degli URL in Chrome. L'esempio completo riportato sopra mostra questo aspetto in azione. Per vedere le modifiche del colore del tema e della 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 sui contenuti multimediali con l'attributo media dell'elemento di colore del 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 di questo documento, non puoi definirle nel manifest. Consulta il bug 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 molto fastidioso, pertanto ora gli strumenti per gli sviluppatori di Chrome ti consentono di emulare la combinazione di colori preferita dall'utente in modo che influisca solo sulla scheda attualmente visibile. Apri il menu dei comandi, inizia a digitare Rendering, esegui il comando Show Rendering e poi modifica l'opzione Emula la funzionalità dei contenuti multimediali CSS prefers-color-scheme.

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 un script Puppeteer che ti consente di creare screenshot delle tue pagine sia in modalità Buio che Luce. Puoi eseguire questo script una tantum 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 avrai notato è che non utilizzo il bianco puro. Invece, per evitare sfumature e sbordature sui contenuti scuri circostanti, scelgo un bianco leggermente più scuro. Qualcosa come rgb(250, 250, 250) funziona bene.

Ricromare e scurire le immagini fotografiche

Se confronti i due screenshot riportati di seguito, noterai che non solo il tema principale è cambiato da scuro in luce a luce su scuro, ma anche che 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 brillanti e vivaci quando è attiva la modalità oscura. La chiamo 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 nell'URL, l'idea è di poter assegnare alle immagini vettoriali (icone) un trattamento di ricolorazione diverso rispetto alle mie immagini (foto). Scopri di più nel prossimo paragrafo. Tieni presente che utilizzo di nuovo una variabile CSS, in modo da poter modificare in modo flessibile il filtro in un secondo momento.

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

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

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

Personalizzazione dell'intensità della ricolorazione della modalità Buio con JavaScript

Non tutti sono uguali e le persone hanno esigenze diverse per quanto riguarda la modalità oscura. Se mantengo il metodo di ricolorazione descritto sopra, posso facilmente impostare l'intensità in scala di grigi come preferenza 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 icone e grafica vettoriale

Per la grafica vettoriale, che nel mio caso sono usate come icone a cui faccio riferimento tramite gli elementi <img>, uso 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 l'importo dell'inversione nello stato normale e in quello :hover.

Nota come ancora una volta invertire le icone solo in dark.css ma non in light.css e come :hover aumenta l'intensità dell'inversione nei due casi per far apparire l'icona leggermente più scura o leggermente più luminosa, 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 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. Se currentColor viene utilizzato come valore degli attributi SVG fill o stroke, viene invece preso il valore ereditato della 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 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. Come puoi vedere, consulta la 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 sia background-color sono proprietà CSS animabili. Per creare l'animazione, è sufficiente dichiarare due transition per le due proprietà. L'esempio seguente illustra l'idea generale. Puoi sperimentarla 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 rendimento del caricamento in generale consigliamo di utilizzare esclusivamente prefers-color-scheme nell'attributo media degli elementi <link> (anziché in linea negli stili), esistono situazioni in cui potresti voler utilizzare prefers-color-scheme direttamente in linea nel codice HTML. La direzione artistica è una situazione del genere. Sul web, la direzione artistica si occupa dell'aspetto visivo complessivo di una pagina e del modo in cui comunica visivamente, stimola gli umori, mette a confronto le funzionalità e si rivolge psicologicamente a un pubblico di destinazione.

Con la modalità Buio, è compito del designer decidere quale sia l'immagine migliore per una determinata modalità e se la ricolorazione delle immagini non sia sufficientemente buona. Se utilizzato con l'elemento <picture>, il <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, se non viene specificata alcuna preferenza, viene utilizzato l'emisfero orientale 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 la possibilità di disattivarla

Come indicato nella precedente sezione Perché la modalità Buio, la modalità Buio è una scelta estetica per la maggior parte degli utenti. Di conseguenza, alcuni utenti potrebbero preferire avere l'interfaccia utente del sistema operativo in modalità Buio, ma preferiscono comunque visualizzare le pagine web nel modo in cui sono abituati a vederle. Un ottimo modello è inizialmente rispettare l'indicatore inviato dal browser tramiteprefers-color-scheme, ma poi, facoltativamente, consentire agli utenti di ignorare l'impostazione a livello di sistema.

Elemento personalizzato <dark-mode-toggle>

Puoi ovviamente creare il codice autonomamente, ma puoi anche utilizzare un elemento personalizzato (componente web) predefinito che ho creato appositamente per questo scopo. Si chiama <dark-mode-toggle> e aggiunge alla pagina un pulsante di attivazione/disattivazione (modalità Buio: on/off) o un selettore di temi (tema: chiaro/scuro) che puoi personalizzare completamente. La demo di seguito mostra l'elemento in azione (e io 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 nella demo in basso. Se selezioni la casella di controllo nel terzo e nel quarto controllo, scopri come la selezione della modalità viene memorizzata anche quando ricarichi la pagina. Ciò consente ai visitatori di mantenere il sistema operativo in modalità Buio, ma di godersi il 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 e essere un utente soddisfatto. Esistono alcuni problemi e sono necessari test accurati, ma la modalità oscura è sicuramente un'ottima opportunità per dimostrare di tenere a tutti i tuoi utenti. Le best practice menzionate in questo post e gli elementi di assistenza come l'elemento personalizzato <dark-mode-toggle> dovrebbero darti la certezza di poter creare un'esperienza in modalità Buio straordinaria. Fammi sapere su Twitter cosa crei e se questo post ti è stato utile o anche suggerimenti per migliorarlo. Grazie per l'attenzione. 🌒

Link correlati

Risorse per la query multimediale prefers-color-scheme:

• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifiche di Media Queries a livello 5

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

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

Link alla modalità Buio generali:

• Material Design - Tema scuro
• Modalità Buio nell'inspector web
• Supporto della modalità Buio in WebKit
• Linee guida Apple Human Interface - Modalità Buio

Articoli di ricerca di base per questo post:

• A cosa serve effettivamente "scheme-colori-supportati" della modalità Buio? 🤔
• Che sia buio! 🌚 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 stati implementati da 👏 Rune Lillesveen. Rune è anche co-editor delle specifiche CSS Color Enrollment Module Level 1. Ringraziamo Lukasz Zbylut, Rowan Merewood, Chirag Desai e Rob Dodson per le loro recensioni approfondite su questo articolo. La strategia di caricamento è nata dalla mente di Jake Archibald. Emilio Cobos Álvarez mi ha indicato il metodo di rilevamento prefers-color-scheme corretto. Il suggerimento con gli SVG e currentColor a cui si fa riferimento proviene da Timothy Hatcher. Infine, ringrazio i numerosi partecipanti anonimi dei vari studi sugli utenti che hanno contribuito a definire i consigli riportati in questo articolo. Immagine hero di Nathan Anderson.