Variables CSS para crear temas
Declare propiedades personalizadas con --, use var(), sobrescríbalas en ámbitos anidados e implemente un conmutador de temas claro y oscuro.
Variables CSS para crear temas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son las propiedades personalizadas de CSS?
Las propiedades personalizadas de CSS (variables CSS) almacenan valores que se pueden reutilizar en toda una hoja de estilos. Se declaran con --name: value y se accede a ellas con var(--name). A diferencia de las variables de preprocesadores como Sass, son dinámicas: puede actualizarlas con JavaScript.
Declaración de propiedades personalizadas
Declare las propiedades en :root para que estén disponibles globalmente. También puede declararlas en cualquier elemento para limitar su alcance al subárbol de ese elemento.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Uso de propiedades personalizadas
Haga referencia a una variable con var(--name). Incluya un valor alternativo como segundo argumento: var(--color-primary, #3182ce). El valor alternativo se utiliza si la variable no está definida.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}La cascada: variables con alcance
Las propiedades personalizadas siguen la cascada y se heredan. Si redefine una variable en un elemento secundario, reemplaza el valor del elemento principal para ese elemento y todos sus descendientes.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Modo oscuro con variables CSS
El patrón más limpio para el modo oscuro consiste en definir paletas de colores claros y oscuros como variables CSS. Alterne una clase o use la media query prefers-color-scheme para cambiar entre ellas. No es necesario sobrescribir propiedades de color individuales.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Alternar el modo oscuro con JavaScript
Añada un botón de alternancia que cambie un atributo de datos o una clase en el elemento raíz. Las variables CSS se encargan del resto: una línea de JavaScript, sin sobrescrituras de estilos individuales.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Actualización de variables con JavaScript
element.style.setProperty('--name', value) actualiza una propiedad personalizada en línea. Al eliminarla con removeProperty se restaura el valor de la cascada. Esto permite crear temas dinámicos y valores animados.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Tokens de diseño como variables CSS
Defina todas las decisiones de diseño —paleta de colores, escala de espaciado y escala tipográfica— como variables CSS. Así se crea una única fuente de verdad que consumen los componentes. Al cambiar un token, el cambio se propaga a todas partes al instante.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Uso de variables en calc()
Las variables CSS funcionan dentro de calc(), lo que permite realizar cálculos adaptativos basados en los valores de los tokens.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Compatibilidad con navegadores
Las propiedades personalizadas de CSS son compatibles con todos los navegadores modernos (desde 2016 en los principales navegadores). No necesita un preprocesador para esta funcionalidad. Para navegadores muy antiguos, proporcione un valor estático antes de var().
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Propiedades personalizadas frente a variables de Sass
Las variables de Sass se compilan en valores estáticos. Las propiedades personalizadas de CSS existen en tiempo de ejecución, son dinámicas, se pueden cambiar con JavaScript y se heredan a través del DOM. Use variables CSS para los temas y variables de Sass para las constantes de compilación.
Comprobación rápida
¿Cómo se lee y actualiza una propiedad personalizada de CSS desde JavaScript?
Resumen: propiedades personalizadas de CSS
Declárelas con -- en :root para que tengan un ámbito global. Úselas con var(). Las variables con ámbito se heredan a los descendientes. Para el modo oscuro, redefina los tokens de color en una consulta de medios o en un atributo de datos. Actualícelas desde JavaScript con style.setProperty(). Los tokens de diseño como variables = una única fuente de verdad.
Preguntas frecuentes
¿La lección «Variables CSS para crear temas» es gratis?
Sí — el texto completo de «Variables CSS para crear temas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Variables CSS para crear temas»?
Declare propiedades personalizadas con --, use var(), sobrescríbalas en ámbitos anidados e implemente un conmutador de temas claro y oscuro. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Variables CSS para crear temas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Profundización en Flexbox: alineación, ajuste y orden
- CSS Grid: template-areas auto-fit minmax
- Combinar Flexbox y Grid
- Variables CSS para crear temas