Implementar un tema obscuro

Durante esta semana estuve implementando un tema obscuro y quiero compartir con ustedes los metodos que descubrí para hacerlo de la manera mas sencilla posible, para implementar un tema obscuro descubrí que hay dos maneras de hacerlo: con Javascript y sin Javascript,

Para las siguientes implementaciones es indispensable tener entendimiento de las variables en css

Es posible hacer un tema obscuro 100% en css gracias a el media query prefers-color-scheme el cual permite detectar sí el tema obscuro esta activado en el dispositivo, aquí un ejemplo:

@media (prefers-color-scheme: dark) {
    /* ... */
}

@media (prefers-color-scheme: light) {
    /* ... */
}

Con este query y variables de css podemos cambiar los colores Sin tener que usar nada de javascript, sin embargo el usuario no puede activarlo sín tener que activar el modo obscuro en su dispositivo.

Hay varias maneras de usar Javascript para implementar un tema obscuro, una de mis preferidas es la que explican en Fireship, aun así pienso que es posible hacer algunas mejoras:

// script.js

const body = document.body
const theme = localStorage.getItem("theme")

if( theme ) {
    body.classList.add( theme )
} else {
    localStorage.setItem('theme', 'light');
    body.classList.add( 'light' )
}

NOTA: localStorage nos permite guardar valores en el navegador y conservarlos por todo el sitio.

Este script lo tenemos que poner en todos los archivos para poder cambiar el tema y tambien tenemos que añadrir "defer" al importar este script para poder aplicar el tema mientras carga la pagina.

/* style.css */

.light {
    --background: white;
    --color: black;
}

.dark {
    --background: black;
    --color: white;
}

/* esta parte es solo un ejemplo */

body{
  background-color: var(--background);
  color: var(--white) ;
}

Este metodo a pesar de ser un poco más complejo de implementar tiene algunas ventajas, por ejemplo podemos tener todos los temas que queramos simplemente añadiendo una clase, mientras que usando css solo podemos usar dos (dark y light), tambien podemos cambiar el tema mientras se usa la pagina.