Añade el Modo Oscuro a tus Sitios Web con CSS, es muy fácil incluir un tema oscuro para sus sitios web existentes usando CSS. En este tutorial, vamos a hacer esto aprovechando las variables CSS.
Vamos a tener 3 opciones diferentes para el tema – Automático, Luz y Oscuridad. Los temas Luz y Oscuridad son bastante autoexplicativos, pero el tema Automático va a usar la configuración del tema del sistema operativo para decidir si el sitio va a ser claro u oscuro.
Aunque no te mostraré cómo hacer este diseño en particular o incluir el contenido, aquí tienes un ejemplo de lo que podríamos crear:
Adición del HTML
Comencemos con el HTML, puede pensar en el atributo como el identificador de cada tema:value
<select id="theme">
<option value="auto">Auto</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
Adición del CSS
Ahora vamos a agregar un poco de CSS al elemento, aquí es donde se especifican los colores para el tema de luz utilizando variables CSS:body
body {
--background-color: #ffffff;
--text-color: #000000;
}
A continuación, querrá hacer uso de sus variables CSS en toda su hoja de estilos – esto es clave para cómo nuestra solución va a funcionar. Por ejemplo, puede hacer lo siguiente:
.main-content {
background: var(--background-color);
color: var(--text-color);
}
button {
color: var(--text-color);
}
Vamos a implementar un tema oscuro simplemente reemplazando los valores de las variables declaradas anteriormente en los casos en los que vamos a usar un tema oscuro. Vamos a agregar este CSS:
:root {
--dark-background-color: #111111;
--dark-text-color: #eeeeee;
}
body.theme-dark {
--background-color: var(--dark-background-color);
--text-color: var(dark-text-color);
}
Ahora, si agrega la clase a su elemento, debería ver el tema oscuro funcionando. En breve usaremos JavaScript para alternar este valor con el, pero vamos a implementar nuestra opción Auto ahora:theme-dark<body><select>
@media (prefers-color-scheme: dark) {
body.theme-auto {
--background-color: var(--dark-background-color);
--text-color: var(--dark-text-color);
}
}
El CSS anterior utiliza Media Queries que está comprobando si el sistema operativo prefiere un tema oscuro, y si es así, queremos aplicar el conjunto de reglas anidado para .body.theme-auto
Básicamente estamos diciendo “¿Prefiere el sistema operativo el modo oscuro, y tiene una clase de ? Si es así, vamos a usar el Modo Oscuro.”<body>theme-auto
Pruébalo cambiando el color del tema del sistema operativo, o mejor aún, ver el sitio web en tu teléfono con el Modo Oscuro habilitado.
Adición de JavaScript
Ahora que nuestro CSS está funcionando, podemos pasar a conseguir que nuestro selector de temas funcione. Vamos a agregar el siguiente JavaScript:
function applyTheme(theme) {
document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
document.body.classList.add(`theme-${theme}`);
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#theme").addEventListener("change", function() {
applyTheme(this.value);
});
});
Aquí, estamos esperando a que el DOM esté listo para que empecemos a usarlo, y una vez que esté listo, estamos escuchando cuando el usuario elige una opción en el menú desplegable del selector de temas. Una vez que eligen una opción, eliminamos todas las clases de tema existentes de la (si las hay) y luego simplemente agregamos el tema seleccionado con.<body>this.value
Un paso más allá – recordar el tema
Podríamos llevar esto un paso más allá y tener la capacidad para que el navegador recuerde el tema que fue elegido en una actualización de página. Para ello, podemos usar Local Storage.
Vamos a agregar el siguiente JavaScript, por lo que terminamos con esto:
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "auto";
applyTheme(savedTheme);
for (const optionElement of document.querySelectorAll("#theme option")) {
optionElement.selected = savedTheme === optionElement.value;
}
document.querySelector("#theme").addEventListener("change", function () {
localStorage.setItem("theme", this.value);
applyTheme(this.value);
});
});
Ahora, al elegir un tema, guardamos el tema en Almacenamiento local mediante el uso de . Después de esto, en la carga de la página, agarramos el tema previamente guardado en la constante, con un valor predeterminado de . Una vez que tenemos esto, simplemente aplicamos el tema guardado.localStorage.setItem("theme", this.value)savedThemeauto
Añadiendo a esto, estamos a través de cada uno de nuestros elementos y comprobar si el valor es el de nuestro tema guardado, y si es así, elegir esa opción como “seleccionado”.<option>
Para probar si funciona, actualizar la página, elegir un tema, actualizar de nuevo, y su tema debe pegarse!
Video Tutorial
Si en su lugar prefiere esto en forma de un video tutorial, echa un vistazo aquí en mi canal de YouTube, dcode!
Si quieres ver el post original en inglés aquí lo puedes hacer.
