I colori del sistema possono reagire al valore color-scheme
attualmente utilizzato. La funzione light-dark()
espone la stessa capacità agli autori.
Colori di sistema in CSS
Nel CSS puoi utilizzare molti colori da uno dei numerosi spazi colore. Ad esempio, puoi utilizzare colori denominati, colori esadecimali, funzioni colore collegate a uno spazio colore specifico e la funzione color()
più generica.
Ad esempio, il colore denominato cornflowerblue
può anche essere rappresentato 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, CSS include colori descritti come colori di sistema, specificati in CSS Color Module Level 4. Questi colori di sistema sono colori definiti dal browser e 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 accoppia correttamente con, e deve anche essere utilizzato in combinazione con CanvasText
, che rappresenta il "testo nei contenuti o nei documenti dell'applicazione".
Nei CSS, devi utilizzarli nel seguente modo:
body {
color: CanvasText;
background-color: Canvas;
}
Per impostazione predefinita, CanvasText
restituisce un colore vicino a black
e Canvas
è un colore vicino a white
. L'effettiva implementazione dipende dal browser. Ad esempio, CanvasText
in Chrome restituisce #121212
, mentre Safari lo ha specificato come #1e1e1e
leggermente più leggero.
Un vantaggio 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 la risposta della pagina.
- Se impostato su
light dark
, indica che l'elemento supporta sia la modalità Luce sia la modalità Buio. La scelta del valore da utilizzare dipende dal valore della condizione dei contenuti multimedialiprefers-color-scheme
. - Se impostato su
light
, indica che l'elemento supporta una combinazione di colori chiaro. - Se impostato su
dark
, indica che l'elemento supporta una combinazione di colori scuri.
Ti presentiamo light-dark()
Finora, la reazione al valore color-scheme
utilizzato era riservata ai colori di sistema. Grazie all'istruzione light-dark()
, specificata nel livello 5 del modulo colore CSS, hai ora a disposizione le stesse funzionalità.
light-dark()
è una funzione che accetta due argomenti, entrambi devono essere <color>
. Viene scelto uno di entrambi in base alla 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()
è un <color>
. Può essere utilizzata 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 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é la proprietà eredita, in genere la imposti su :root
, ma se vuoi puoi scegliere di impostarla su un elemento specifico.
Applicazione pratica
Nell'esempio riportato di seguito, alcune proprietà personalizzate rappresentano i colori nella pagina. Per soddisfare le esigenze della 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;
}
}
Grazie a light-dark()
, questo codice può essere semplificato. Poiché color-scheme
è impostato su light dark
il giorno :root
, i valori di questi colori cambiano automaticamente quando il sistema operativo passa dalla modalità Luce a Buio 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);
}
Come bonus aggiuntivo, è 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
.