2025 · 11 · 05 · 3 min

CSS Custom Properties: il mio sistema di temi

Come gestisco dark/light mode, colori brand e spaziature in ogni progetto senza dipendenze esterne.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

In ogni mio progetto ho un file `tokens.css` con le variabili CSS di base: colori, spaziature, tipografia. Nessuna dipendenza esterna, nessun setup da configurare — funziona nel browser come in qualsiasi framework.

Per la dark mode uso due blocchi: `:root` per il tema chiaro e `[data-theme='dark']` per il tema scuro. Non uso `prefers-color-scheme` direttamente perché voglio che l'utente possa sovrascrivere la preferenza di sistema.

Il pattern che uso di più è la variabile semantica: invece di `--blue-600` espongo `--color-primary`. Quando il brand cambia, aggiorno un valore, non duecento occorrenze sparse nel CSS.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?