Perché le Custom Properties Cambiano il Gioco
Le variabili CSS non sono solo una comodità — sono fondamentali quando costruisci sistemi di tema duali. Invece di scrivere colori specifici in centinaia di selettori, definisci una volta e riusi ovunque.
Immagina di dover cambiare il blu primario da un’intera applicazione. Senza variabili? Cerca e sostituisci in decine di file. Con le custom properties? Modifica una sola linea nel tuo `:root` e il cambiamento si propaga istantaneamente. Non c’√® niente di pi√π elegante.
Il vantaggio reale: Mantienibilit√†. Quando il designer dice “questo grigio non funziona in dark mode”, tu non rientri in panico. Aggiusti una variabile e il sito intero si adatta.
Strutturare le Tue Variabili in Modo Intelligente
Non puoi buttare le variabili a caso nel tuo CSS e sperare che funzioni. Hai bisogno di una struttura logica. Pensa a layer: colori di base, colori di ruolo (primario, secondario, successo, errore), e poi valori semantici.
Ad esempio, invece di `–color-button-bg`, usa `–color-primary` per il ruolo generico. Poi, in light mode, `–color-primary` √® `#2563eb`. In dark mode? `#60a5fa`. Semplice.
- Variabili di base: colori grezzi senza significato
- Variabili di ruolo: colori per azioni (primario, errore, avvertenza)
- Variabili semantiche: colori per componenti specifici
Nota importante: Questo articolo fornisce linee guida educative su CSS custom properties e best practices di tema. Le implementazioni specifiche variano in base alla complessità del progetto, ai browser supportati e alle preferenze del team. Consulta la documentazione MDN e gli standard WCAG per conformità completa.
Implementazione Pratica: Dal Concetto al Codice
Ecco come iniziare. Scrivi il tuo `:root` con variabili per light mode. Poi, all’interno di una media query `prefers-color-scheme: dark`, riscrivi solo le variabili che cambiano. Il resto eredita automaticamente.
Struttura base:
:root {
–color-bg: #ffffff;
–color-text: #0f172a;
–color-primary: #2563eb;
}
@media (prefers-color-scheme: dark) {
:root {
–color-bg: #0f172a;
–color-text: #f1f5f9;
–color-primary: #60a5fa;
}
}
Poi nei tuoi selettori, usi solo `var(–color-bg)` e `var(–color-text)`. Niente hardcoding di colori. Pulito, manutenibile, e il tema cambia automaticamente in base alla preferenza del sistema.
Evita Questi Errori Comuni
Primo errore? Mescolare variabili e colori hardcoded. Se usi `–color-primary` da una parte e `#2563eb` da un’altra, il tuo sistema di tema si spezza. Sii rigoroso: o usi variabili dappertutto, o non usarle.
Secondo errore: non testare il contrasto. Una variabile che funziona in light mode potrebbe avere un contrasto insufficiente in dark mode. Usa strumenti come WebAIM o il color contrast checker per verificare che ogni coppia colore-sfondo raggiunga almeno AA secondo WCAG.
Terzo errore: dimenticare i fallback. Non tutti i browser supportano le custom properties allo stesso modo (anche se ormai √® raro). Aggiungi sempre un valore fallback: `color: var(–color-text, #0f172a);`
Porta a Casa
Le custom properties CSS sono lo strumento che trasforma il dark mode da “fastidio” a “fatto”. Non devi riscrivere il tuo intero sito. Struttura le tue variabili in modo intelligente, usa le media query per scambiare i valori, e il tuo tema dualer si adatter√† perfettamente a qualsiasi preferenza dell’utente.
Inizia oggi. Crea un file di variabili pulito, testalo su entrambi i temi, e guarda come il tuo sito si trasforma in qualcosa di veramente elegante e mantenibile. Non c’√® magia qui ‚Äî √® solo CSS ben scritto.
Scopri altri articoli su dark mode
