prefers-color-scheme: Ciao buio, amico mio

Eccessiva necessità o eccessiva necessità? Scopri tutto sulla modalità Buio e su come supportarla a vantaggio dei tuoi utenti.

Thomas Steiner

Introduzione

Modalità Buio prima della modalità Buio

Siamo passati al cerchio completo con la modalità Buio. Agli albori del personal computing, la modalità Buio non era una questione di scelta, ma è un dato di fatto: Monitor di computer CRT monocromatici lavorati da fasci elettronici 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 venivano spesso chiamati schermate verdi.

I colori CRT introdotti successivamente 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 dei più sofisticati WYSIWYG desktop Publishing, diventò popolare l'idea di rendere il documento virtuale simile a un foglio di carta fisico.

È da qui che è iniziata la tendenza di design scuro su bianco, e questa tendenza si è estesa basato su documenti iniziali sul web. Il primo browser in assoluto, WorldWideWeb (ricorda che Il CSS non è stato ancora inventato), visualizzate 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 generalmente progettate con testo scuro su uno sfondo chiaro, un'ipotesi di base che è anche hardcoded nei fogli di stile dello user agent, tra cui 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 un LCD retroilluminato o schermi AMOLED a risparmio energetico. Computer, tablet e smartphone più piccoli e trasportabili hanno portato a nuovi modelli di utilizzo. Attività nel tempo libero come navigazione sul web, programmazione per divertimento e giochi di fascia alta avvengono spesso fuori orario in ambienti poco illuminati. Le persone usano i dispositivi sul letto anche di notte. Più persone usano i loro dispositivi al buio, più diventa popolare l'idea di tornare alle origini del luce sul buio.

Perché la modalità Buio

Modalità Buio per motivi estetici

Quando viene chiesto alle persone perché piace o vuole la modalità Buio, la risposta più popolare è che "è più gradevole agli occhi" seguita da "è elegante e bellissima". Mela nel suo Documentazione per gli sviluppatori relativa alla modalità Buio scrive esplicitamente: "La scelta di abilitare un aspetto chiaro o scuro è un'estetica 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 strumento di accessibilità. ad esempio utenti ipovedenti. Il primo esempio di questo strumento di accessibilità che ho potuto trovare è La funzionalità CloseView del Sistema 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 i loro punti deboli una volta introdotto il colore. Ricerca sugli utenti di Szpiro et al. su come le persone ipovedenti accedono ai dispositivi informatici ha dimostrato che a tutti gli utenti intervistati non sono piaciuti le immagini invertite, ma molti preferiscono testo chiaro su sfondo scuro. Apple soddisfa questa preferenza degli utenti con una funzionalità chiamata Inversione smart, che inverte i colori sul display, ad eccezione di immagini, contenuti multimediali, e alcune app che usano stili con colori scuri.

Una forma speciale di ipovisione è la sindrome da visione artificiale, nota anche come affaticamento digitale dell'occhio, definita come "la combinazione di problemi alla vista e alla vista associati all'uso di computer (tra cui computer desktop, laptop e tablet) e altri display elettronici (ad es. smartphone e dispositivi elettronici di lettura)." È stato proposto che l'uso di dispositivi elettronici da parte degli adolescenti, soprattutto di notte, aumenta il rischio di una durata del sonno più breve, maggiore latenza all'inizio del sonno e aumento della carenza di sonno. Inoltre, l'esposizione alla luce blu è stata ampiamente segnalato di essere coinvolti nella regolamentazione ritmo circodiano e il ciclo del sonno, e ambienti leggeri irregolari possono portare alla carenza di sonno, che possono influire sull'umore e sulle prestazioni delle attività, secondo ricerca di Rosenfield. Per limitare questi effetti negativi, riduci la luce blu regolando la temperatura di colore del display grazie a funzioni come quelle di iOS Adattamento notturno o La funzionalità Luminosità notturna può aiutarti, ed evitare luci intense o irregolari in generale attraverso temi scuri o modalità buie.

Risparmio energetico in modalità Buio sugli schermi AMOLED

Infine, la modalità Buio è nota per risparmiare molta energia sul AMOLED. Case study di Android incentrati sulle app Google più popolari come YouTube hanno dimostrato che il risparmio energetico può arrivare fino al 60%. Il video seguente contiene 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 supportarlo.

Sistemi operativi che supportano la modalità Buio o il tema scuro in genere hanno la possibilità di attivarla da qualche parte nelle impostazioni. Su macOS X, si trova nella sezione Generali della preferenza di sistema e si chiama Aspetto (screenshot), Su Windows 10, si trova nella sezione Colori e si chiama Scegli il tuo colore (screenshot). In Android Q, puoi trovarlo in Display con l'opzione di attivazione/disattivazione Tema scuro (screenshot), e su iOS 13 puoi modificare l'aspetto nella sezione Luminosità delle impostazioni (screenshot).

La query multimediale prefers-color-scheme

Un'ultima parte di teoria prima di andare. Query multimediali consentire agli autori di testare ed eseguire query su valori o funzionalità dello user agent o del dispositivo di visualizzazione; indipendenti dal documento visualizzato. Vengono utilizzati 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. Livello 5 delle query multimediali introduce le cosiddette funzionalità multimediali preferite dall'utente, ovvero un modo che consente ai siti di rilevare la modalità preferita dell'utente di visualizzare i contenuti.

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

• light: Indica che l'utente ha informato il sistema della preferenza relativa a una pagina con tema chiaro (testo scuro su sfondo chiaro).
• dark: Indica che l'utente ha informato il sistema della preferenza relativa a 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 controllare se il browser corrente supporta la modalità Buio controllando se la query multimediale prefers-color-scheme ha corrispondenze. 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 documento, prefers-color-scheme è supportato sia su computer che su dispositivi mobili (se disponibile) di Chrome ed Edge a partire dalla versione 76, Firefox a partire dalla versione 67, e Safari a partire dalla versione 12.1 su macOS e dalla versione 13 su iOS. Per tutti gli altri browser, puoi selezionare Posso utilizzare le tabelle di supporto.

Conoscere le preferenze di un utente al momento della richiesta

Intestazione del suggerimento client Sec-CH-Prefers-Color-Scheme consente ai siti di ottenere le preferenze relative alla combinazione di colori dell'utente 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 in pratica il supporto della modalità Buio. Proprio come con Highlander, con la modalità Buio può esistere un solo elemento: chiaro o scuro, ma mai entrambi. Perché lo menzioni? Perché questo fatto dovrebbe avere un impatto sulla strategia di caricamento. Non forzare gli utenti a scaricare file CSS nel percorso di rendering critico per una modalità che al momento non usa. Per ottimizzare la velocità di caricamento, ho quindi suddiviso il mio CSS per l'app di esempio che mostra nella pratica i seguenti consigli in tre parti per differire i CSS non critici:

• 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

Le ultime due, light.css e dark.css, vengono caricati in modo condizionale con una query <link media>. All'inizio non tutti i browser supportano prefers-color-scheme (rilevabile utilizzando il pattern indicato 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 minuscolo in linea (la luce è una scelta arbitraria, avrei potuto anche rendere dark l'esperienza di fallback predefinita). Per evitare lampeggi 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

Utilizzo massimo le variabili CSS, questo fa sì che il mio style.css generico sia 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 sostanzialmente un tema di base buio su luce e luce 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, poi uso queste variabili nella regola body { … }. Come sono definiti nel :root pseudo-classe CSS: una selettore che nel codice HTML rappresenta l'elemento <html> ed è identico al selettore html, tranne per il fatto che la sua specificità è e vengono applicati a cascata, il che mi consente di 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.

Questa informazione indica al browser i temi cromatici supportati dalla mia app e consente di attivare varianti speciali del foglio di stile dello user agent, utile per consentire, ad esempio, al browser di eseguire il rendering dei campi del modulo con uno sfondo scuro e testo chiaro, regola le barre di scorrimento, o attivare un colore di evidenziazione sensibile al tema. I dettagli esatti di color-scheme sono specificati in Livello 1 del modulo di aggiustamento dei colori CSS.

Tutto il resto è quindi solo questione di definizione delle variabili CSS per gli aspetti importanti del 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, come "giallo" potrebbe non essere giallo in modalità Buio o viceversa. Di seguito sono riportate altre variabili che uso 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 incorporamento di Glitch, l'esempio completo mette in pratica i concetti di cui sopra. Prova ad attivare/disattivare la modalità Buio nelle impostazioni del tuo sistema operativo specifici. e vedere come reagisce la pagina.

Caricamento impatto

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

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 utilizzarlo, ad esempio, per modificare in modo dinamico favicon di una pagina o modificare <meta name="theme-color">: che determina il colore della barra dell'URL in Chrome. L'esempio completo riportato sopra mostra questo esempio in azione. per vedere i cambiamenti di colore e favicon del tema, apri la di una 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 tema meta. La verrà scelta la prima che corrisponda. Ad esempio, potresti avere un colore per modalità Luce e un'altra per modalità Buio. Al momento della stesura di questo articolo, non puoi nel tuo manifest. Vedi w3c/manifest#975 GitHub problema.

<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 in poco tempo. quindi Chrome DevTools ora ti consente di emulare la combinazione di colori preferita dall'utente. in un modo che influisce 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 Protocollo DevTools. Con dark-mode-screenshot, offriamo uno script Puppeteer che ti consente di creare screenshot delle tue pagine sia in modalità Buio sia in modalità Luce. Puoi eseguire questo script una tantum o, in alternativa, renderlo parte del tuo 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 bagliori e sanguinamento nei contenuti scuri circostanti, Scelgo un bianco leggermente più scuro. Qualcosa come rgb(250, 250, 250) funziona bene.

Ricolorazione e scurimento delle immagini fotografiche

Se confronti i due screenshot di seguito, noterai che non solo il tema principale è cambiato da scuro su chiaro a luce 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 preferisci immagini leggermente meno vivaci e brillanti quando è attiva la modalità Buio. Definisco questa procedura come ricolorazione.

di Gemini Advanced.

.

.

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 applicare alle grafiche vettoriali (icone) un trattamento di ricolorazione diverso delle mie immagini (foto), maggiori informazioni su questo argomento nel prossimo paragrafo. Nota che utilizzo di nuovo una variabile CSS in modo da poter cambiare in seguito il filtro in modo flessibile.

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 impostare facilmente l'intensità della scala di grigi nelle preferenze dell'utente modifica tramite JavaScript, Impostando il valore 0%, posso anche disattivare del tutto la ricolorazione. Tieni presente che document.documentElement fornisce un riferimento all'elemento radice del documento, ovvero lo stesso elemento a cui posso fare riferimento :root pseudo-classe CSS.

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

Inverti grafiche e icone vettoriali

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

di Gemini Advanced.

.

.

Nota come ripeto invertio le icone solo in dark.css ma non in light.css e come :hover ha un'intensità di inversione diversa nei due casi per far apparire l'icona leggermente più scuro o leggermente più luminoso, 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 gli SVG in linea

Per le immagini SVG incorporate, invece di utilizzare i filtri di inversione, puoi sfruttare la currentColor Parola chiave CSS 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. Per comodità, se viene utilizzato currentColor come valore del file SVG Attributi fill o stroke, prende il valore dal valore ereditato della proprietà color. Meglio ancora: funziona anche <svg><use href="…"></svg>, per avere risorse separate e currentColor continuerà a essere applicato nel contesto. Tieni presente che questa opzione funziona solo per gli SVG in linea o <use href="…">, ma non 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 semplificato grazie al fatto che sia color sia background-color siano proprietà CSS animate. Creare l'animazione è facile come dichiarare due transition per le due proprietà. L'esempio seguente illustra l'idea generale. Puoi sperimentarla dal vivo 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 la modalità Buio

Consiglio di lavorare esclusivamente con prefers-color-scheme, per motivi legati alle prestazioni di caricamento in generale. nell'attributo media degli elementi <link> (anziché incorporarli nei fogli di stile), esistono delle situazioni in cui potresti voler lavorare con prefers-color-scheme direttamente incorporato 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 della sua comunicazione visiva, stimola umori, mette in contrasto le caratteristiche e fa presa psicologicamente su un pubblico di destinazione.

Con la modalità Buio, spetta al designer decidere quale sia l'immagine migliore in una determinata modalità e se la ricolorazione delle immagini non è sufficiente. Se utilizzato con l'elemento <picture>, il valore <source> dell'immagine da mostrare può dipendere dall'attributo media. Nell'esempio seguente, mostro l'emisfero occidentale per la modalità Buio e l'emisfero orientale per la modalità Luce o in assenza di preferenze, impostando in maniera predefinita l'emisfero orientale. Questo è ovviamente solo a scopo 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 indicato nella sezione Perché la modalità Buio qui sopra, la modalità Buio è una scelta estetica per la maggior parte degli utenti. Di conseguenza, alcuni utenti potrebbero voler avere una UI del proprio sistema operativo. al buio, ma preferiscono comunque vedere le pagine web come sono abituati a vederle. Un ottimo metodo consiste nell'aderire inizialmente al segnale inviato dal browser prefers-color-scheme, ma per consentire facoltativamente agli utenti di eseguire l'override dell'impostazione a livello di sistema.

L'elemento personalizzato <dark-mode-toggle>

Puoi ovviamente creare il codice personalmente, ma puoi anche utilizzare un elemento personalizzato pronto all'uso (componente web) che ho creato proprio a questo scopo. Si chiama <dark-mode-toggle> e aggiunge un pulsante di attivazione/disattivazione (modalità Buio: on/off) un selettore di temi (tema: chiaro/scuro) per la tua pagina, che puoi personalizzare completamente. La demo riportata di seguito mostra l'elemento in azione (Oh, e l'ho anche infilato silenziosamente in tutte le altro esempi sopra).

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

di Gemini Advanced.

.

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, osserva come viene selezionata la modalità viene memorizzato anche quando ricarichi la pagina. Ciò consente ai visitatori di mantenere il sistema operativo in modalità Buio ma goditi il sito in modalità Luce o viceversa.

Conclusioni

Lavorare e supportare la modalità Buio è divertente e apre le porte a nuove strade di progettazione. Per alcuni visitatori potrebbe fare la differenza tra l'impossibilità di gestire il sito. ed essere un utente soddisfatto. Ci sono alcune insidie ed è sicuramente necessario eseguire test accurati. ma la modalità Buio è sicuramente un'ottima opportunità per dimostrare il tuo interesse per tutti i tuoi utenti. Le best practice menzionate in questo post e gli aiutanti come Elemento personalizzato <dark-mode-toggle> può aiutarti a creare un'esperienza incredibile con la modalità Buio. Fammi sapere su Twitter cosa crei e se questo post ti è stato utile o anche suggerimenti per migliorarla. Grazie per l'attenzione. 🌒

Link correlati

Risorse per la query multimediale prefers-color-scheme:

• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifica di livello 5 delle query supporti

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

• La proprietà CSS e il meta tag color-scheme
• Pagina Stato della piattaforma Chrome
• Bug di Chromium
• Specifiche di livello 1 del modulo di aggiustamento dei colori CSS
• Problema a GitHub di WG CSS per il meta tag e la proprietà CSS
• Problema HTML WHATWG a GitHub per il 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:

• Cosa include lo schema "supported-color-schemes" della modalità Buio? Davvero? 🤔
• 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 meta tag correlato è il lavoro di implementazione di 👏 Rune Lillesveen. Rune è anche co-editor della specifica CSS Color Adjust Module Level 1 (Livello 1 del modulo di aggiustamento dei colori CSS). Vorrei Voglio ringraziare Lukasz Zbylut, Rowan Merewood Chirag Desai e Rob Dodson per un'attenta analisi interna di questo articolo. La strategia di caricamento è un'idea di Jake Archibald. Emilio Cobos Álvarez mi ha indirizzato al metodo di rilevamento prefers-color-scheme corretto. Il suggerimento con gli SVG di riferimento e i currentColor provengono da Timothy Hatcher, Infine, sono grato ai numerosi partecipanti anonimi ai vari studi sugli utenti che hanno contribuito a dare forma ai consigli in questo articolo. Immagine hero di Nathan Anderson.