En este artículo exploramos cómo cambiar entre temas claros y oscuros (y más) usando únicamente variables CSS, con ejemplos prácticos, mejores prácticas y comparativas.
1. ¿Por qué usar variables CSS para temas?
- Sin JavaScript pesado: el navegador recalcula los valores automáticamente.
- Compatibilidad nativa con
:rootyprefers-color-scheme. - Facilidad para mantener un único punto de definición de colores.
2. Definición de variables en :root
:root {
/* Paleta base */
--color-bg: #ffffff;
--color-fg: #212529;
--color-primary: #0d6efd;
--color-secondary: #6c757d;
}
/* Tema oscuro */
[data-theme="dark"] {
--color-bg: #121212;
--color-fg: #e0e0e0;
--color-primary: #bb86fc;
--color-secondary: #03dac6;
}3. Aplicación de variables en componentes
body {
background-color: var(--color-bg);
color: var(--color-fg);
}
a {
color: var(--color-primary);
}4. Cambiar de tema con JavaScript
const toggle = document.getElementById('theme-toggle');
const root = document.documentElement;
function setTheme(theme) {
root.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Detectar preferencia del sistema
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem('theme');
setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
toggle.addEventListener('click', () => {
const current = root.getAttribute('data-theme');
setTheme(current === 'dark' ? 'light' : 'dark');
});5. UI de conmutación (Bootstrap)
6. Comparativa de características (Light vs Dark)
Modo Claro
- Fondo claro (#ffffff)
- Contraste óptimo en pantallas brillantes
- Menor consumo de energía en monitores LCD
Modo Oscuro
- Fondo oscuro (#121212)
- Reduce fatiga visual en entornos con poca luz
- Beneficia a dispositivos OLED (menos consumo)
7. Comparación con otras técnicas
| Técnica | Ventajas | Desventajas | Compatibilidad |
|---|---|---|---|
Variables CSS + prefers-color-scheme |
Sin JS, rendimiento nativo, fácil de mantener | Requiere fallback para navegadores antiguos | Chrome + Edge + Firefox + Safari (≥ 9) |
| Preprocesadores (Sass, Less) | Funciones avanzadas, estructuras complejas | Necesita compilación, no permite cambios en tiempo de ejecución | Todo navegador (CSS generado) |
| Bibliotecas JS (styled‑components, Theme UI) | Integración con frameworks React/Vue, theming dinámico | Mayor bundle size, dependencia extra | Depende del framework, navegadores modernos |
8. Buenas prácticas y seguridad
- Persistencia segura: Usa
localStoragecon nombres de clave únicos y valida el valor antes de aplicarlo. - Fallback CSS: Declara valores por defecto en
:rootpara navegadores que no soporten variables. - Accesibilidad: Mantén suficiente contraste (≥ 4.5:1) y permite al usuario sobrescribir el tema manualmente.
- Performance: Cambiar el atributo
data-themeenhtmlobodyevita re‑flujo amplio.
9. Solución de problemas comunes
- Variables no se aplican: Verifica que el selector tenga la misma raíz (
:rooto[data‑theme]) y que no haya errores de sintaxis. - El tema no persiste tras recargar: Asegúrate de leer
localStorageantes de aplicarprefers-color-schemey de guardar el valor correctamente. - Contraste insuficiente en modo oscuro: Usa herramientas como Contrast Checker para validar colores.
10. Escalabilidad: múltiples temas
/* Tema solarizado */
[data-theme="solarized"] {
--color-bg: #fdf6e3;
--color-fg: #657b83;
--color-primary: #268bd2;
}
/* Tema high‑contrast */
[data-theme="high-contrast"] {
--color-bg: #000000;
--color-fg: #ffffff;
--color-primary: #ffde00;
}Simplemente agrega botones o un <select> que llame a setTheme() con el nombre del tema.
Conclusión
El uso de variables CSS para el theme switching ofrece una solución ligera, mantenible y altamente compatible. Con los ejemplos y prácticas descritas, puedes implementar desde un simple modo oscuro hasta sistemas de tematización multi‑tema sin depender de librerías externas.