Avanzado⏱ 40 min
🎨
CSS · Capítulo 11
Variables CSS y Temas
Usa custom properties (variables CSS) para crear sistemas de design tokens y temas dinámicos.
📖
Teoría
Las variables CSS (custom properties) permiten definir valores reutilizables que se pueden cambiar dinámicamente:
``css``
:root {
--color-primary: #4F8EF7;
}
.btn { background: var(--color-primary); }
Ventajas sobre variables de Sass/Less:
- Son variables CSS reales en el navegador
- Pueden cambiarse con JavaScript
- Respetan la cascada y el scope
- Funcionan con media queries para temas responsivos
css
/* Definir variables en :root (scope global) */
:root {
--color-bg: #0A0A0F;
--color-surface: #13131A;
--color-primary: #4F8EF7;
--color-text: #E8E8F0;
--radius: 8px;
--spacing-md: 1rem;
}
/* Usar variables */
body { background: var(--color-bg); color: var(--color-text); }
.card { background: var(--color-surface); border-radius: var(--radius); }
/* Tema claro con clase en <html> */
[data-theme="light"] {
--color-bg: #FFFFFF;
--color-surface: #F5F5F5;
--color-text: #0A0A0F;
}⚡
Ejercicio práctico
🎯 Tu misión
Crea un sistema de design tokens con variables CSS y un toggle de tema oscuro/claro. Al hacer clic en el botón, cambia el atributo `data-theme` del elemento `<html>` con JavaScript.
Vista previa