Cómo hacer un «modo oscuro» solo con HTML y CSS

Modo oscuro sin JavaScript

Puede que pienses que dotar a tu página Web de un «modo oscuro» puede resultar bastante difícil y que, por supuesto, es imprescindible hacer uso de JavaScript. Si bien es cierto que usar JavaScript es la forma «correcta», gracias a las mejoras en CSS es posible replicar este efecto de forma muy sencilla solo con HTML y CSS.

Esta forma de realizar el efecto tiene una única pega, y es que no tiene persistencia. Es decir, cuando el usuario cambia de página dentro de nuestro sitio Web, o visita nuestro sitio Web por segunda vez, es imposible (utilizando solo HTML y CSS) lograr recordar si el usuario había activado o no el modo oscuro.

Así, aunque es extremadamente fácil de implementar, solo tiene realmente sentido en sitios Web de una única página (one page website).

Variables CSS, el selector :has() y un checkbox

Para implementar este efecto de modo oscuro, tan solo necesitamos hacer uso de variables CSS, el selector :has() y un checkbox. Lo bueno, además, es que vamos a tener mucha  libertad a la hora de organizar el código CSS. A diferencia de otros trucos hechos solo con HTML y CSS, en este caso no es necesario colocar el checkbox en ningún lugar concreto.

Veamos el código que hace la magia:

/* colores claros por defecto */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

/* asignamos colores a nuestro documento */
body {
  background: var(--bg-color);
  color: var(--text-color);      
  /* la transición no es necesaria pero queda bonita */
  transition: background 0.3s, color 0.3s;
}

/* aqui está la magia */
body:has(#darkmode-toggle:checked) {
  --bg-color: #1e1e1e;
  --text-color: #f5f5f5;
}

Tal y como se puede observar, lo único que hay que hacer es utilizar variables CSS para indicar los colores, y luego cambiar los valores de dichas variables cuando detectemos que existe un checkbox que haya sido marcado dentro del body.

En este caso estamos usando el atributo id con valor «darkmode-toggle» para el selector, así que es importante usarlo en el checkbox correspondiente.

<input id="darkmode-toggle" type="checkbox" /> 
<label class="toggle" for="darkmode-toggle">Modo Oscuro</label>

¡Y ya está! De esta forma tan sencillo lograremos el efecto. Super fácil y flexible. Para comprender completamente el funcionamiento, es importante que comprendas como funcionan las variables CSS y también que comprendas el selector has().

Es posible que no te guste tener que colocar un «feo» checkbox, pero recuerda que ¡hay trucos para darle un aspecto más bonito! Aunque eso excede la intención de este breve artículo y puede que merezca el suyo propio en el futuro.

Y nada más. Espero que os haya resultado interesante este truco tan sencillo 🙂