Si tu color de marca aparece en veinte lugares del CSS y necesitas cambiarlo, tendrías que buscarlo veinte veces. Una variable CSS —también llamada custom property— lo guarda en un solo lugar.

Se define con dos guiones al principio, --nombre, y se usa con var(--nombre).

If your brand colour shows up in twenty places in the CSS and you need to change it, you would have to hunt it down twenty times. A CSS variable — also called a custom property — stores it in one place.

It is defined with two leading dashes, --name, and used with var(--name).

:root es un selector que apunta al elemento más alto de toda la página. Definir variables ahí las hace disponibles en cualquier parte del CSS, porque cualquier elemento hereda de la raíz.

:root is a selector pointing to the very top element of the whole page. Defining variables there makes them available anywhere in the CSS, because every element inherits from the root.

También se pueden redefinir dentro de un selector más específico, y solo cambian ahí adentro:

They can also be redefined inside a more specific selector, and only change within it:

El celular o computador del visitante ya sabe si está en modo oscuro o claro. CSS puede preguntarle con @media (prefers-color-scheme: dark), y redefinir las variables solo para ese caso.

The visitor's phone or computer already knows whether it is in dark or light mode. CSS can ask it with @media (prefers-color-scheme: dark), and redefine the variables only for that case.

Si además quieres un botón para que el visitante elija a mano, se combina con lo que ya sabes de JavaScript: cambiar un atributo en el HTML, y que el CSS reaccione a él.

If you also want a button for the visitor to choose by hand, combine it with what you already know about JavaScript: change an attribute on the HTML, and have the CSS react to it.

Definir variables CSS en :root, redefinirlas dentro de una clase específica, adaptarlas automáticamente con prefers-color-scheme, y armar un interruptor manual combinándolas con JavaScript.

Ahora, algo que toda página necesita tarde o temprano: formularios que además validen lo que la gente escribe.

Defining CSS variables in :root, redefining them inside a specific class, adapting them automatically with prefers-color-scheme, and building a manual switch by combining them with JavaScript.

Now, something every page needs sooner or later: forms that also validate what people type.