Theme Switching con Variables CSS: Guía Completa

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 :root y prefers-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)

7. Comparación con otras técnicas

8. Buenas prácticas y seguridad

• Persistencia segura: Usa localStorage con nombres de clave únicos y valida el valor antes de aplicarlo.
• Fallback CSS: Declara valores por defecto en :root para 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-theme en html o body evita re‑flujo amplio.

9. Solución de problemas comunes

1. Variables no se aplican: Verifica que el selector tenga la misma raíz (:root o [data‑theme]) y que no haya errores de sintaxis.
2. El tema no persiste tras recargar: Asegúrate de leer localStorage antes de aplicar prefers-color-scheme y de guardar el valor correctamente.
3. 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.