Colori CSS dipendenti dallo schema di colori con light-dark()

I colori di sistema possono reagire al valore color-scheme attualmente utilizzato. La funzione light-dark() espone la stessa funzionalità agli autori.

Bramus

Colori di sistema in CSS

In CSS puoi utilizzare molti colori di uno dei tanti spazi dei colori. Ad esempio, puoi utilizzare colori con nome, colori esadecimali, funzioni di colore collegate a uno spazio dei colori specifico e la funzione color() più generica.

Ad esempio, il colore denominato cornflowerblue può essere rappresentato anche come #6495ED, hsl(218.54deg 79.19% 66.08%) o color(display-p3 0.43 0.58 0.9).

Oltre a questi vari nomi e formati, i CSS includono colori descritti come colori di sistema, specificati in CSS Color Module Level 4. Questi colori di sistema sono definiti dal browser e sono rappresentati da una parola chiave.

Ad esempio, il colore di sistema Canvas, da non confondere con l'elemento <canvas>, rappresenta lo "sfondo dei contenuti o dei documenti dell'applicazione". Si abbina bene a CanvasText, che rappresenta il "testo nei contenuti o nei documenti dell'applicazione", ed è anche destinato a essere utilizzato in combinazione con questo elemento.

In CSS, vengono utilizzati come segue:

body {
  color: CanvasText;
  background-color: Canvas;
}

Per impostazione predefinita, CanvasText genera un colore simile a black e Canvas è un colore simile a white. L'implementazione effettiva dipende dal browser. Ad esempio, CanvasText in Chrome genera #121212, mentre Safari lo specifica come #1e1e1e, leggermente più chiaro.

Un potere nascosto di questi colori di sistema è che possono rispondere al valore calcolato della proprietà color-scheme. Ad esempio, i valori di CanvasText e Canvas vengono invertiti quando il valore color-scheme utilizzato è dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

Nella demo seguente, puoi modificare il valore di color-scheme impostato su :root e vedere come risponde la pagina.

  • Se impostato su light dark, indica che l'elemento supporta sia la modalità Luce sia la modalità Buio. La scelta del valore utilizzato dipende dal valore della condizione multimediale prefers-color-scheme.
  • Se impostato su light, indica che l'elemento supporta una combinazione di colori chiari.
  • Se impostato su dark, indica che l'elemento supporta una combinazione di colori scuri.
Una pagina che ti consente di modificare il valore di color-scheme. Quando cambi, i colori della pagina cambiano quando passi da chiaro a scuro o viceversa, anche se le dichiarazioni sull'elemento body rimangono invariate.

Ti presentiamo light-dark()

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Finora, la reazione al valore color-scheme utilizzato era riservata ai colori di sistema. Grazie a light-dark(), specificato in CSS Color Module Level 5, ora hai anche la stessa funzionalità.

light-dark() è una funzione che accetta due argomenti, entrambi di tipo <color>. Viene scelto uno dei due a seconda della combinazione di colori utilizzata.

  • Se la combinazione di colori utilizzata è light o sconosciuta, viene restituito il valore calcolato del primo valore.
  • Se la combinazione di colori utilizzata è dark, viene restituito il valore calcolato del secondo colore.

Il risultato di light-dark() è <color>. Può essere utilizzato nel CSS ovunque sia accettato un <color>. Ad esempio, nelle proprietà color e background-color, ma anche in una funzione come linear-gradient().

Nell'esempio seguente, il colore di sfondo utilizzato è #333 in modalità Buio o #ccc in modalità Luce (o in una modalità sconosciuta).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Tieni presente che, affinché light-dark() funzioni correttamente, devi specificare un color-scheme. Poiché questa proprietà viene ereditata, in genere la imposti su :root, ma se vuoi puoi scegliere di impostarla su un elemento specifico.

Applicazione pratica

Nell'esempio seguente, alcune proprietà personalizzate rappresentano i colori della pagina. Per supportare la modalità Buio, i valori di queste proprietà personalizzate vengono sovrascritti da un valore diverso in una condizione multimediale prefers-color-scheme.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}
Una pagina che risponde alla modalità Luce o Buio tramite prefers-color-scheme.
I valori dei colori vengono modificati in CSS utilizzando una query supporti.

Grazie a light-dark(), questo codice può essere semplificato. Poiché color-scheme è impostato su light dark in :root, i valori di questi colori cambiano automaticamente quando passi dalla modalità Luce alla modalità Buio del sistema operativo e viceversa.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
Una pagina che risponde alla modalità Luce o Buio utilizzando prefers-color-scheme.
I valori dei colori vengono modificati utilizzando light-dark().

Inoltre, è possibile forzare un determinato sottoalbero del DOM a utilizzare solo la modalità Luce o Buio impostando color-scheme su dark o light. Nell'esempio seguente, questo viene applicato a :root.

Una pagina che risponde alla modalità Luce o Buio utilizzando prefers-color-scheme.
I valori dei colori vengono modificati utilizzando light-dark().
Utilizzando una delle opzioni, puoi forzare una modalità Luce o Buio. Questo risultato si ottiene manipolando il valore color-scheme.