Las custom properties de CSS explicadas con un tema claro y oscuro en vivo hecho solo con variables, getPropertyValue y setProperty en JavaScript, @property, @theme de Tailwind v4 y trampas habituales.
Declara una variable CSS con dos guiones, --brand: #2563eb;, normalmente dentro de :root para que toda la página la vea, y léela con var(--brand). Un segundo argumento es el valor de respaldo: var(--brand, blue). Las variables se heredan igual que color, así que redefinir una en una sección la cambia para todo lo que contiene, lo que hace que los temas salgan baratos.
La sintaxis de un vistazo
Esta guía cubre cómo declarar, delimitar el ámbito y usar valores de respaldo; después, un selector de tema donde solo cambian variables, una herramienta que lee y escribe variables desde JavaScript en esta misma página, las propiedades registradas con @property, cómo Tailwind v4 convierte su tema en variables y los errores que hacen que var() falle sin avisar.
Las variables de Sass se sustituyen al compilar la hoja de estilos y desaparecen del resultado. Las custom properties de CSS existen en el navegador en tiempo de ejecución, se heredan a través del DOM, pueden variar por elemento y se pueden cambiar desde JavaScript o con una regla de media query después de cargar la página.
No. var() no está permitido en la condición de una regla @media, porque las media queries se evalúan sin un elemento del que heredar. Sin embargo, sí puedes cambiar el valor de una variable dentro de un bloque de media query, que es la forma habitual de hacer que los tokens sean adaptables.
Comprueba la ortografía y las mayúsculas, que la variable esté definida en el elemento o en un ancestro, y que el valor final sea válido para la propiedad. Si el valor sustituido no es válido, la declaración pasa a ser inválida en el momento del valor calculado y la propiedad vuelve a su valor heredado o inicial, no a tu regla anterior.
Una variable sin registrar se trata como una cadena, así que cambia de golpe a mitad de la transición en lugar de interpolarse. Regístrala con @property y una sintaxis como <color> o <angle>, y el navegador podrá interpolarla con suavidad en transiciones y animaciones.
Las custom properties y var() funcionan en todos los navegadores principales desde hace años. @property es más reciente: Firefox lo añadió en la versión 128 en 2024, así que consulta caniuse si das soporte a versiones antiguas y mantén un respaldo sin registrar.
Valores claros y oscuros
La segunda tarjeta redefine --accent para sí misma. La tercera usa una variable que nadie ha definido, así que se ve el color de respaldo.
Un único conjunto de reglas de componentes. El tema es otro conjunto de valores, elegido por la configuración del sistema o por un atributo data-theme.
Lee el valor calculado de cualquier elemento. Escribe en :root para un cambio global, o en un elemento para afectar solo a su subárbol.
Registrar --angle como <angle> permite al navegador interpolarlo. Sin el registro, el degradado saltaría en lugar de girar.
En Tailwind v4, las variables de @theme generan utilidades como bg-brand y además se emiten como variables CSS reales que puedes usar con var().
Cosas que confunden a la gente
Tema claro y oscuro, solo con variables
Tema
modo claro
modo oscuro
Informe semanal
Pedidos en alza respecto a la semana pasada
pedidos de ejemplo
Ver detalles
Lo único que cambia
Copiar CSS
Lee y escribe variables desde JavaScript
La caja de muestra de abajo usa var(--demo-accent, #2563eb) para el borde y var(--demo-radius, 8px) para las esquinas. Asigna cualquiera de las dos variables y la caja cambia.
Nombre de la variable
Nuevo valor
El nombre de una custom property empieza con dos guiones, por ejemplo --demo-radius.
Leer
Asignar
Quitar
Prueba --demo-radius
Caja de muestra
(sin definir)
Empieza gratis · Sin tarjeta de crédito