Variabili CSS per cambiare tema

Le proprietà personalizzate CSS (variabili) definite su :root sono disponibili globalmente in tutto il foglio di stile. Definire una palette completa una sola volta — sfondi, colori del testo, superfici, bordi — e farvi riferimento ovunque. Questa singola fonte di verità rende banale il cambio di tema.

Quando un attributo data-theme="dark" viene impostato su document.documentElement, un selettore CSS come [data-theme='dark'] sovrascrive le variabili radice con valori scuri. I componenti fanno riferimento a var(--color-bg) e acquisiscono automaticamente i nuovi valori senza modifiche al codice.

Come minimo, definire: --color-bg (sfondo della pagina), --color-text (testo principale), --color-primary (colore del brand), --color-surface (sfondo di schede e pannelli) e --color-border (separatori). Un insieme coerente di token impedisce la comparsa di valori di colore definiti in modo estemporaneo nei componenti.

Nel CSS del componente, fare riferimento a variabili come background: var(--color-bg) e color: var(--color-text). È anche possibile fornire un valore di fallback: var(--color-bg, #ffffff). Il browser risolve la variabile al momento del rendering, quindi una sola classe funziona sia per i temi chiari sia per quelli scuri.

Aggiungere transition: background-color 200ms, color 200ms al selettore :root. Quando l'attributo data-theme cambia, tutti gli elementi che utilizzano variabili CSS eseguono simultaneamente l'animazione verso i nuovi valori. Si ottiene così un risultato curato senza codice di animazione JavaScript.

Gestire il tema tramite variabili CSS è preferibile all'impostazione di stili inline da JavaScript. Il browser gestisce nativamente tutti i ricalcoli degli stili, non vengono attivati ulteriori re-render di React per ogni componente figlio a tema e la cascata CSS gestisce automaticamente l'ereditarietà. A JS basta modificare un solo attributo sull'elemento radice.

È possibile combinare le variabili CSS con la query @media (prefers-color-scheme: dark) come fallback esclusivamente CSS. Definire gli override scuri all'interno della media query oltre al selettore data-theme (oppure al suo posto). In questo modo la modalità scura funziona anche se JavaScript non è ancora stato eseguito.

L'approccio più solido combina entrambi i meccanismi: la query @media fornisce il valore predefinito del sistema operativo, mentre un attributo data-theme consente l'override dell'utente tramite JavaScript. Quando l'attributo è presente, prevale grazie alla specificità; quando è assente, entra in vigore la media query.

Per le immagini che risultano poco adatte agli sfondi scuri, utilizzare l'elemento HTML picture con un elemento figlio source media="(prefers-color-scheme: dark)". Il browser seleziona automaticamente la variante scura. Per le icone SVG in CSS, è possibile utilizzare filter: invert(1) come rapida approssimazione.

È anche possibile limitare l'ambito delle variabili CSS a singoli componenti definendole sull'elemento radice del componente anziché su :root. Questo consente di applicare temi specifici ai componenti, ad esempio una barra laterale con un proprio token per lo sfondo, diverso da quello della pagina, mantenendo comunque il corretto cambio con il toggle globale del tema.

Chrome DevTools mostra i valori risolti delle variabili CSS nel pannello Styles. Fare clic sul riferimento alla variabile per passare alla sua definizione. In questo modo è facile verificare che il token chiaro o scuro corretto venga applicato a un elemento. È anche possibile modificare i valori delle variabili direttamente nel pannello.

Quale selettore CSS viene utilizzato per definire le proprietà personalizzate CSS globali applicate all'intero documento?

Le proprietà personalizzate CSS su :root forniscono un sistema centralizzato di token per i temi. Modificare un attributo data-theme sull'elemento html per cambiare immediatamente tema. Aggiungere transizioni CSS per un'animazione fluida, utilizzare la media query prefers-color-scheme come fallback esclusivamente CSS ed evitare override degli stili tramite JS a livello dei singoli componenti.