I colori di sistema hanno la capacità di reagire al valore color-scheme
corrente utilizzato. La funzione light-dark()
espone la stessa funzionalità agli autori.
Colori di sistema in CSS
In CSS puoi utilizzare molti colori da uno dei numerosi spazi colore. Ad esempio, puoi utilizzare colori con nome, colori esadecimali, funzioni di colore collegate a uno spazio di colore specifico, 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, il CSS include i colori descritti come colori di sistema, specificati nel modulo Colore CSS di livello 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 è pensato per essere utilizzato in combinazione con questo attributo.
In CSS, li utilizzi nel seguente modo:
body {
color: CanvasText;
background-color: Canvas;
}
Per impostazione predefinita, CanvasText
restituisce un colore simile a black
e Canvas
è un colore simile a white
. L'implementazione effettiva dipende dal browser. Ad esempio, CanvasText
in Chrome produce #121212
, mentre Safari lo specifica come #1e1e1e
leggermente più chiaro.
Un vantaggio nascosto di questi colori di sistema è che possono rispondere al valore calcolato della proprietà color-scheme
. Ad esempio, i valori per CanvasText
e Canvas
vengono invertiti quando il valore color-scheme
utilizzato è dark
.
:root {
color-scheme: dark;
}
body {
color: CanvasText;
background-color: Canvas;
}
Nella seguente demo, 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 che la modalità Buio. La scelta del valore da utilizzare dipende dal valore dellaprefers-color-scheme
condizione media. - Se impostato su
light
, indica che l'elemento supporta una combinazione di colori chiara. - Se impostato su
dark
, indica che l'elemento supporta una combinazione di colori scura.
Ti presentiamo light-dark()
Finora, la reazione al valore color-scheme
utilizzato era riservata ai colori di sistema. Grazie a light-dark()
, specificato nel livello 5 del modulo colore CSS, ora hai anche la stessa funzionalità.
light-dark()
è una funzione che accetta due argomenti, entrambi devono essere <color>
. Viene scelto uno dei due 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 utilizzato in CSS ovunque sia accettato <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 una modalità sconosciuta).
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#ccc, #333);
}
Tieni presente che per il corretto funzionamento di light-dark()
devi specificare un color-scheme
. Poiché questa proprietà eredita, in genere viene impostata 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 prefers-color-scheme
condizione media.
: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
in :root
, i valori di questi colori cambiano automaticamente quando passi dalla modalità chiara a quella scura 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);
}
Come ulteriore vantaggio, è 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
.