Tutorial: crea tu propio tema oscuro con variables CSS

¿Alguna vez cambiaste un color en CSS y tuviste que buscar y reemplazar en quince lugares distintos? Las variables CSS existen exactamente para que eso no vuelva a pasarte.

Paso 1: declara tus variables

:root {
  --color-fondo: #0b1620;
  --color-superficie: #101e27;
  --color-texto: #ffffff;
  --color-acento: #00e5bf;
}

:root es como una caja fuerte global donde guardas tus colores. --color-fondo es el nombre de la variable (el -- es obligatorio).

Paso 2: úsalas en tus estilos

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

.tarjeta {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-acento);
}

var(--color-fondo) le dice a CSS "usa el valor que está guardado en esa variable". Si mañana quieres cambiar todo tu esquema de colores, solo tocas el bloque :root.

Paso 3: crea un tema claro alternativo (opcional, para valientes)

[data-theme='claro'] {
  --color-fondo: #ffffff;
  --color-superficie: #f2f2f2;
  --color-texto: #111111;
}

<body data-theme="claro">

Al agregar data-theme="claro" al <body>, todas las variables cambian de valor automáticamente y arrastran contigo cualquier estilo que las use. Esto es, básicamente, magia disfrazada de CSS.

¿Qué acabas de aprender?

• Cómo declarar variables CSS con :root y --nombre.
• Cómo usarlas con var(--nombre).
• Cómo cambiar un tema completo modificando solo un lugar.