En el capítulo anterior habíamos creado una plantilla para un tema claro/oscuro, el problema es que cuando recargamos, vuelve a salir el tema por defecto, que en nuestro caso es el claro, sin que quede por defecto el tema que el usuario dejó por última vez.
En este capítulo, y gracias a la API localStorage, corregiremos ésto. Dicha API nos permite almacenar información en el disco duro del usuario, y cada navegador tiene su algoritmo para almacenar.
Existe una pestaña denominada Application, en la cual vamos a encontrar la información del LocalStorage. En un principio dicha aplicación está limpia, no tiene ni llave ni valor. En dicha aplicación podemos guardar diferentes variables, que servirán para almacenar información para que las aplicaciones puedan funcionar.
LocalStorage es un objeto que detecta por sí el navegador. Si escribimos en la consola localStorage, si tiene algo almacenado aparecerá. LocalStorage tiene aplicaciones muy importantes a día de hoy.
Para el ejercicios que proponemos, necesitamos dos métodos, uno que permita obtener el valor de una variable de tipo localStorage, y otro que permita actualizar o establecer un valor para localStorage.
Vamos a necesitar desencadenar un evento del tipo DOMContentLoaded, porque a la hora que cargue nuestra aplicación.
Archivos
Hemos modificado los archivos tema_oscuro.js y index_dom.js. El resto de archivos permanecen igual.
Sintaxis del archivo tema_oscuro.js.
const d = document,
ls = localStorage;
export default function darkTheme(btn, classDark) {
const $themeBtn = d.querySelector(btn),
$selectors = d.querySelectorAll("[data-dark]");
// console.log($selectors);
let moon = "🌙",
sun = "☀️";
const lightMode = () => {
$selectors.forEach((el) => el.classList.remove(classDark));
$themeBtn.textContent = moon;
ls.setItem("theme", "light");
};
const darkMode = () => {
$selectors.forEach((el) => el.classList.add(classDark));
$themeBtn.textContent = sun;
ls.setItem("theme", "dark");
};
d.addEventListener("click", (e) => {
if (e.target.matches(btn)) {
console.log($themeBtn.textContent);
if ($themeBtn.textContent === moon) {
darkMode();
} else {
lightMode();
}
}
});
d.addEventListener("DOMContentLoaded", (e) => {
console.log(ls.getItem("theme"));
if (ls.getItem("theme") === null) {
ls.setItem("theme", "light");
}
if (ls.getItem("theme") === "light") {
lightMode();
}
if (ls.getItem("theme") === "dark") {
darkMode();
}
});
}
Sintaxis del archivo index_dom.js.
import { scrollTopButton } from "./boton_scroll.js";
import countdown from "./cuenta_regresiva.js";
import hamburgerMenu from "./menu_hamburguesa.js";
import { digitalClock, alarm } from "./reloj.js";
import { moveBall, shortcuts } from "./teclado.js";
import darkTheme from "./tema_oscuro.js";
const d = document;
d.addEventListener("DOMContentLoaded", (e) => {
hamburgerMenu(".panel-btn", ".panel", ".menu a");
digitalClock("#reloj", "#activar-reloj", "#desactivar-reloj");
alarm("alarma.mp3", "#activar-alarma", "#desactivar-alarma");
countdown("countdown", "Feb 14, 2024 12:32:03", "Feliz cumpleaños");
scrollTopButton(".scroll-top-btn");
});
d.addEventListener("keydown", (e) => {
shortcuts(e);
moveBall(e, ".ball", ".stage");
});
darkTheme(".dark-theme-btn", "dark-mode");
Enlace a todos los archivos
En este enlace encontrarás el ejercicio completo.