prefers-color-scheme: Ciao buio, amico mio

Troppa eccitazione o necessità? Scopri tutto quello che c'è da sapere sulla modalità Buio e come supportarla a vantaggio dei tuoi utenti.

Introduzione

Modalità Buio prima della modalità Buio

Siamo passati al cerchio completo con la modalità Buio. Agli albori dei personal computer, la modalità Buio non era una scelta preferita, ma in realtà: i monitor di computer monocromatici CRT funzionavano accendendo fasci di elettroni su uno schermo fosforescente e il fosforo utilizzato nei primi sistemi CRT era verde. Poiché il testo era visualizzato in verde e il resto dello schermo era nero, questi modelli venivano spesso chiamati schermi verdi.

Successivamente, i CRT a colori mostravano più colori mediante l'uso di fosfori rossi, verdi e blu. Hanno creato il bianco attivando tutti e tre i fosfori contemporaneamente. Con l'avvento della più sofisticata pubblicazione su desktop WYSIWYG, l'idea di trasformare il documento virtuale in un foglio di carta fisico è diventata popolare.

È qui che è nata il scuro su bianco come tendenza del design, che è stata poi trasferita sul web basato sui primi documenti. Il primo browser in assoluto, WorldWideWeb (ricorda che CSS non è stato ancora inventato), ha visualizzato le pagine web in questo modo. Curiosità: il secondo browser in assoluto, Line Mode Browser, un browser basato su terminale, era verde su scuro. Oggi le pagine web e le app web sono generalmente progettate con testo scuro su sfondo chiaro, un'ipotesi di base codificata anche nei fogli di stile dello user agent, tra cui quelli di Chrome.

I tempi dei CRT sono finiti. Il consumo e la creazione di contenuti sono ora spostati 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à ricreative come la navigazione sul web, la programmazione per divertimento e i giochi di fascia alta spesso si svolgono al di fuori dell'orario di lavoro in ambienti poco illuminati. Le persone si godono persino i dispositivi nel letto di notte. Più persone usano i loro dispositivi al buio, più si diffondono l'idea di tornare alle origini del luce su scuro.

Perché la modalità Buio

Modalità Buio per motivi estetici

Quando alle persone viene chiesto perché gli piace o vogliono la modalità Buio, la risposta più popolare è che "è più facile per gli occhi", seguita da "è elegante e bellissima". Apple nella documentazione per gli sviluppatori relativa alla modalità Buio scrive in modo esplicito: "La scelta di attivare un aspetto chiaro o scuro è un aspetto estetico per la maggior parte degli utenti e potrebbe non riguardare le condizioni di illuminazione ambientale."

Modalità Buio come strumento di accessibilità

Ci sono anche persone che hanno bisogno della modalità Buio e la utilizzano come ulteriore strumento di accessibilità, ad esempio gli utenti ipovedenti. La prima occorrenza di uno strumento di accessibilità di questo tipo è la funzionalità CloseView di System 7, che disponeva di un pulsante di attivazione/disattivazione per Nero su bianco e Bianco su nero. Anche se il colore System 7 supportava il colore, l'interfaccia utente predefinita era ancora in bianco e nero.

Queste implementazioni basate sull'inversione hanno dimostrato i loro punti deboli una volta introdotto il colore. Una ricerca sugli utenti di Szpiro et al. su come le persone ipovedenti accedono ai dispositivi informatici ha dimostrato che a tutti gli utenti intervistati le immagini invertite non sono piaciute, ma che molti preferiscono un testo chiaro su uno sfondo scuro. Apple soddisfa questa preferenza dell'utente con una funzionalità chiamata Smart Invert, che inverte i colori del display, ad eccezione di immagini, contenuti multimediali e alcune app che usano stili di colore scuro.

Una forma speciale di ipovisione è la sindrome da visione artificiale, nota anche come affaticamento dell'occhio digitale, definita come "la combinazione di problemi di vista e di vista associati all'uso dei computer (inclusi computer, laptop e tablet) e altri display elettronici (ad es. smartphone e dispositivi di lettura elettronici)." È stato proposto che l'utilizzo di dispositivi elettronici da parte degli adolescenti, in particolare di notte, comporta un maggiore rischio di durata del sonno più breve, latenza di insorgenza del sonno più lunga e 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. Secondo una ricerca di Rosenfield, gli ambienti luminosi irregolari possono portare a una carenza di sonno, con un possibile impatto sull'umore e sulle attività da svolgere. Per limitare questi effetti negativi, può essere utile ridurre la luce blu regolando la temperatura di colore del display tramite funzionalità come la funzionalità Adattamento notturno di iOS o Luminosità notturna di Android, oltre a evitare luci intense o luci irregolari in generale tramite temi scuri o modalità Buio.

Risparmio energetico in modalità Buio sugli schermi AMOLED

Infine, è noto che la modalità Buio consente di risparmiare molta energia sugli schermi AMOLED. I case study Android incentrati sulle app Google più diffuse come YouTube hanno dimostrato che il risparmio energetico può arrivare fino al 60%. Il video qui sotto contiene maggiori dettagli su questi case study e sul risparmio energetico di ciascuna app.

Attivazione della modalità Buio nel sistema operativo

Ora che abbiamo visto come funziona la modalità Buio così da molti utenti, vediamo come puoi supportarla.

I sistemi operativi che supportano la modalità Buio o il tema scuro di solito hanno la possibilità di attivarlo da qualche parte nelle impostazioni. Su macOS X, l'opzione si trova nella sezione Generali delle preferenze di sistema e si chiama Aspetto (screenshot), mentre su Windows 10 si trova nella sezione Colori, denominata Scegli il colore (screenshot). Su Android Q puoi trovarla sotto Display come interruttore di attivazione/disattivazione per Tema scuro (screenshot) e su iOS 13 puoi modificare l'Aspetto nella sezione Display e luminosità delle impostazioni (screenshot).

La query supporti prefers-color-scheme

Un ultimo punto di teoria 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 utilizzati nella regola @media CSS per applicare gli stili in modo condizionale a un documento e in vari altri contesti e linguaggi, come HTML e JavaScript. Il livello 5 delle query multimediali introduce le cosiddette funzionalità multimediali con preferenze dell'utente, ovvero un modo per consentire ai siti di rilevare il modo preferito dell'utente di visualizzare i contenuti.

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

• light: indica che l'utente ha informato il sistema che preferisce una pagina a tema chiaro (testo scuro su sfondo chiaro).
• dark: indica che l'utente ha informato il 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 questa modalità controllando se la query supporti prefers-color-scheme corrisponde. Nota come 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 scrittura, prefers-color-scheme è supportato sia su computer che su dispositivi mobili (se disponibile) di Chrome ed Edge a partire dalla versione 76, da Firefox alla versione 67 e da Safari alla versione 12.1 su macOS e alla versione 13 su iOS. Per tutti gli altri browser, consulta la sezione Posso utilizzare le tabelle di assistenza?

Conoscere le preferenze di un utente al momento della richiesta

L'intestazione del suggerimento per il 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 integrare il codice CSS corretto ed evitare, di conseguenza, l'utilizzo di un tema cromatico errato.

Modalità Buio in pratica

Vediamo finalmente come funziona nella pratica il supporto per la modalità Buio. Proprio come con la modalità Buio, con la modalità Buio ce n'è solo una: scura o chiara, ma mai entrambe. Perché devo menzionarlo? Perché questo fatto dovrebbe avere un impatto sulla strategia di caricamento. Non obbligare gli utenti a scaricare CSS nel percorso di rendering critico per una modalità che al momento non utilizzano. Per ottimizzare la velocità di caricamento, ho quindi suddiviso il mio CSS per l'app di esempio che mostra in pratica i seguenti suggerimenti in tre parti in modo da rinviare CSS non fondamentale:

• 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 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 luce è una scelta arbitraria, potrei anche rendere oscura l'esperienza di riserva predefinita). Per evitare un lampo di contenuti senza stile, nascondo 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 dei fogli di stile

Faccio il massimo uso delle variabili CSS, in questo modo il mio style.css generico è generico, e la personalizzazione della modalità Luce o Buio avviene negli altri due file dark.css e light.css. Qui sotto puoi vedere un estratto degli stili reali, ma dovrebbe essere sufficiente per esprimere l'idea generale. Dichiaro due variabili, -⁠-⁠color e -⁠-⁠background-color, che sostanzialmente creano 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);
}

In style.css, uso queste variabili nella regola body { … }. Poiché sono definiti 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à è superiore, si procedono a cascata, il che serve a 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 separato da spazi light dark.

Questo indica al browser quali temi a colori sono supportati dalla mia app e consente di 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, di regolare le barre di scorrimento o di attivare un colore di evidenziazione basato sul tema. I dettagli esatti di color-scheme sono specificati in Livello 1 del modulo di regolazione del colore CSS.

Tutto il resto è solo una questione di definire le variabili CSS per gli elementi importanti sul mio sito. L'organizzazione semantica degli stili è molto utile quando si lavora con la modalità Buio. Ad esempio, anziché -⁠-⁠highlight-yellow, puoi chiamare la variabile -⁠-⁠accent-color, in quanto "giallo" potrebbe non essere giallo in modalità Buio e 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 Glitch che segue, puoi vedere l'esempio completo che mette in pratica i concetti esposti sopra. Prova ad attivare/disattivare la modalità Buio nelle impostazioni del sistema operativo e osserva come reagisce la pagina.

Impatto del caricamento

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

Reagire ai cambiamenti in modalità Buio

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

Screenshot di prefers-color-scheme con burattinaio

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 sia in modalità Luce. Puoi eseguire questo script come una tantum o, in alternativa, includerlo 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 utilizzo il bianco puro. Per evitare brillantini e perdite di sangue sui contenuti scuri circostanti, scelgo un bianco leggermente più scuro. Qualcosa come rgb(250, 250, 250) funziona bene.

Ricolorare e scurire le immagini fotografiche

Confrontando 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. Dalla mia ricerca con gli utenti è emerso che la maggior parte degli intervistati preferisce immagini leggermente meno vivaci e brillanti quando è attiva la modalità Buio. La definisco come ricolorazione.

La ricolorazione può essere ottenuta mediante un filtro CSS sulle mie immagini. Utilizzo un selettore CSS che corrisponde a tutte le immagini che non contengono .svg nell'URL, l'idea è che posso assegnare alle grafiche vettoriali (icone) un trattamento di ricolorazione diverso rispetto alle mie immagini (foto). Per saperne di più, consulta il prossimo paragrafo. Tieni presente che uso di nuovo una variabile CSS per 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 ci sono 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 la modalità Buio. Attenendoti al metodo di ricolorazione descritto sopra, posso facilmente rendere l'intensità della scala di grigi una preferenza dell'utente che posso modificare tramite JavaScript e, impostando un valore pari a 0%, posso anche disattivare completamente la ricolorazione. Tieni presente che document.documentElement fornisce un riferimento all'elemento principale 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 le grafiche e le icone vettoriali

Per le grafiche vettoriali, che nel mio caso sono utilizzate come icone a cui faccio riferimento tramite gli elementi <img>, utilizzo un metodo di ricolorazione diverso. Anche se le ricerche hanno dimostrato che alle persone non piace l'inversione delle foto, questo metodo funziona molto bene per la maggior parte delle icone. Uso le variabili CSS per determinare l'importo dell'inversione in normale e nello stato :hover.

Tieni presente che invertisco di nuovo le icone solo in dark.css ma non in light.css e che :hover aumenta l'intensità dell'inversione 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);
}

Usa currentColor per le SVG in linea

Per le immagini SVG in linea, invece di utilizzare i filtri di inversione, puoi utilizzare 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. Praticamente, se currentColor viene utilizzato come valore degli attributi fill o stroke SVG, prende il valore dal valore ereditato della proprietà color. Meglio ancora: funziona anche per <svg><use href="…"></svg>, quindi puoi avere risorse separate e currentColor verrà comunque applicato nel contesto. Tieni presente che questa procedura funziona solo per gli SVG inline o <use href="…">, ma non per quelli indicati come src di un'immagine o in qualche modo tramite CSS. Puoi vedere che queste misure vengono applicate nella demo riportata 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 migliorato grazie al fatto che entrambi color e 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 guardarla 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);
}

Art Director con la modalità Buio

Per quanto riguarda il caricamento per motivi legati alle prestazioni in generale, ti consiglio di lavorare esclusivamente con prefers-color-scheme nell'attributo media degli elementi <link> (invece che in linea nei fogli di stile), in alcuni casi potresti voler lavorare con prefers-color-scheme direttamente nel codice HTML. L'art director è in questa situazione. Sul web, l'art director si occupa dell'aspetto visivo complessivo di una pagina e del modo in cui comunica visivamente, stimola gli stati d'animo, contrasta le caratteristiche e attira psicologicamente un pubblico di destinazione.

Con la modalità Buio, spetta al giudizio del designer 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 valore <source> dell'immagine da mostrare può essere reso dipendente dall'attributo media. Nell'esempio che segue, mostro l'emisfero occidentale per la modalità Buio e l'emisfero orientale per la modalità Luce o quando non viene data alcuna preferenza, per impostazione predefinita l'emisfero orientale in tutti gli altri casi. Questo è ovviamente a scopo puramente illustrativo. Attiva/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 aggiungi un'opzione di 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 apprezzare che l'interfaccia utente del loro sistema operativo sia oscurata, ma preferiscono comunque vedere le pagine web nel modo in cui sono abituati a vederle. Un ottimo modo è aderire inizialmente al segnale che il browser invia tramite prefers-color-scheme, ma poi, facoltativamente, consentire agli utenti di ignorare l'impostazione a livello di sistema.

L'elemento personalizzato <dark-mode-toggle>

Ovviamente puoi creare il codice autonomamente, ma puoi anche utilizzare un elemento personalizzato pronto all'uso (componente web) che ho creato io 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 pagina, personalizzabile completamente. La demo qui sotto mostra l'elemento in azione (e l'ho anche 🤫 inserito silenziosamente in tutti gli altri esempi di cui 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 per la modalità Buio nell'angolo in alto a destra nella demo qui sotto. Se selezioni la casella di controllo nel terzo e nel quarto controllo, scopri come viene memorizzata la selezione della modalità anche quando ricarichi la pagina. In questo modo i visitatori potranno mantenere il sistema operativo in modalità Buio e goderti il tuo sito in modalità Luce o viceversa.

Conclusioni

Lavorare con la modalità Buio e supportarla è divertente e apre nuove strade per il design. Per alcuni visitatori può fare la differenza tra non essere in grado di gestire il proprio sito ed essere un utente soddisfatto. Ci sono alcune insidie ed è assolutamente necessario eseguire test accurati, ma la modalità Buio è sicuramente un'ottima opportunità per dimostrare che hai a cuore tutti i tuoi utenti. Le best practice menzionate in questo post e aiuti come l'elemento personalizzato <dark-mode-toggle> dovrebbero aiutarti a creare una straordinaria esperienza con la 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 multimediale prefers-color-scheme:

• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifiche delle query multimediali 5

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

• Il meta tag e la proprietà CSS color-scheme
• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifiche del modulo di regolazione del colore CSS per il livello 1
• Problema relativo a GitHub di CSS WG relativo al meta tag e alla proprietà CSS
• Problema relativo a GitHub WHATWG HTML per il meta tag

Link per la modalità Buio generale:

• Material Design: tema scuro
• Modalità Buio in Inspector web
• Supporto della modalità Buio in WebKit
• Linee guida per l'interfaccia umana di Apple - Modalità Buio

Articoli di ricerca di base per questo post:

• Cosa fa effettivamente la modalità Buio "supported-color-schemes"? 🤔
• Che ci sia oscurità! 🌚 Forse...
• Ricolorazione per la modalità Buio

Ringraziamenti

La funzionalità multimediale prefers-color-scheme, la proprietà CSS color-scheme e il meta tag correlato sono lavori di implementazione di 👏 Rune Lillesveen. Rune è anche co-editor delle specifiche del modulo di regolazione del colore del CSS di livello 1. vorrei 🙏 grazie a Lukasz Zbylut, Rowan Merewood, Chirag Desai e Rob Dodson per la loro attenta recensione di questo articolo. La strategia di caricamento è nata da Jake Archibald. Emilio Cobos Álvarez mi ha indirizzato al metodo di rilevamento prefers-color-scheme corretto. Il suggerimento con SVG di riferimento e currentColor proviene da Timothy Hatcher. Infine, ringrazio i molti partecipanti anonimi dei vari studi sugli utenti che hanno contribuito a dare forma ai consigli in questo articolo. Immagine hero di Nathan Anderson.