Temas con propiedades personalizadas de CSS — y basta
La manera estándar moderna de hacer temas en la web es con CSS custom properties (variables CSS). No necesita Sass, no necesita JavaScript, no necesita un runtime. Esto es todo lo que hace xarop.com para tener seis sabores.
La idea básica
:root {
--color-accent: #ff0000;
}
:root[data-flavor="menta"] {
--color-accent: #00a878;
}
a { color: var(--color-accent); }
Cambiar data-flavor en el <html> cambia instantáneamente todas las referencias. Sin recarga, sin repintado de JavaScript.
Light / Dark automático
:root {
--bg: white;
--text: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--text: #eee;
}
}
Respeta las preferencias del sistema. Los usuarios ya tienen una opinión; no hay que imponerles la nuestra.
Override manual
:root[data-theme="dark"] {
--bg: #111;
--text: #eee;
}
Con data-theme="dark" forzamos el modo. Un <button> de tres líneas de JavaScript puede cambiar el atributo. Opcional — la web funciona sin esto.
accent-color y color-scheme
Dos propiedades modernas que usamos poco:
:root {
accent-color: var(--color-accent);
color-scheme: light dark;
}
accent-color colorea checkboxes, radios y algunos controles nativos. color-scheme le dice al navegador qué colores de UI (scrollbar, form controls) debe usar.
Combinar tema + sabor
:root[data-theme="dark"][data-flavor="menta"] {
--color-accent: #00a878;
--bg: #111;
}
Los selectores de atributos se pueden combinar. El cartesiano puede crecer pero generalmente el sabor solo toca --color-accent y variantes, mientras el tema toca fondos/texto. Se mantienen ortogonales.
Conclusión
Las CSS custom properties son potentes. En un 90% de los casos de "sistema de temas" son todo lo que necesitas. JavaScript para persistencia (localStorage) es opcional — un progressive enhancement.