Temi con proprietà CSS personalizzate — e basta
Il modo moderno standard per creare temi sul web è con le CSS custom properties (variabili CSS). Non serve Sass, non serve JavaScript, non serve un runtime. Questo è tutto quello che fa xarop.com per avere sei sapori.
L'idea di base
:root {
--color-accent: #ff0000;
}
:root[data-flavor="menta"] {
--color-accent: #00a878;
}
a { color: var(--color-accent); }
Cambiare data-flavor su <html> cambia istantaneamente tutti i riferimenti. Senza ricarica, senza ridisegno JavaScript.
Light / Dark automatico
:root {
--bg: white;
--text: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--text: #eee;
}
}
Rispetta le preferenze del sistema. Gli utenti hanno già un'opinione; non è necessario imporgli la nostra.
Override manuale
:root[data-theme="dark"] {
--bg: #111;
--text: #eee;
}
Con data-theme="dark" forziamo la modalità. Un <button> di tre righe di JavaScript può cambiare l'attributo. Opzionale — il web funziona senza.
accent-color e color-scheme
Due proprietà moderne che usiamo poco:
:root {
accent-color: var(--color-accent);
color-scheme: light dark;
}
accent-color colora checkbox, radio e alcuni controlli nativi. color-scheme dice al browser quali colori UI (scrollbar, form controls) deve usare.
Combinare tema + sapore
:root[data-theme="dark"][data-flavor="menta"] {
--color-accent: #00a878;
--bg: #111;
}
I selettori di attributi si possono combinare. Il prodotto cartesiano può crescere ma generalmente il sapore tocca solo --color-accent e varianti, mentre il tema tocca sfondi/testo. Si mantengono ortogonali.
Conclusione
Le CSS custom properties sono potenti. Nel 90% dei casi di "sistema di temi" sono tutto quello che ti serve. JavaScript per persistenza (localStorage) è opzionale — un progressive enhancement.