Tengo themes.css (almacena variables css para temas), index.html, themes.html, script.js, about_us.html archivos en mi proyecto. ¿Por qué el tema no cambia para todos los archivos .html?
Themes.css se ve así:
body { --header-background-color: #1b1c27; --foreground: #eceff4; --background-color: #2e3440; --nav-background: #4c566a; --text-color-nav: #eceff4; --text-color-hover: #81a1c1; --text-color-active: #d8dee9; --articles-intro: #9defff; --team-heading: #5e81ac; transition: 1s; } body.dracula { --header-background-color: #282a36; --foreground: #f8f8f2; --background-color: #282a36; --nav-background: #44475a; --text-color-nav: #ff79c6; --text-color-hover: #8be9fd; --text-color-active: #50fa7b; --articles-intro: #bd93f9; --team-heading: #ff5555; transition: 1s; }
Esto establece las clases de cuerpo. Si la clase de cuerpo es Drácula, entonces el tema es Drácula. Ejecuta un script para cambiar el tema.
guión.js
document.querySelector(".dracula_theme").addEventListener("click", () => { document.body.className = "dracula"; }); document.querySelector(".default").addEventListener("click", () => { document.body.className = ""; });
Este script solo cambia el color de themes.html. Se ejecuta en themes.html.
Entonces, ¿hay una mejor manera de hacer esto? ¿O puedo cambiar algo en esto para obtener mi resultado?
Puede ser una cuestión de preferencia, pero siempre uso <link rel="stylesheet" href="styles.css">
. En mi experiencia, funciona a la perfección y no tiene los fallos que suelen tener los scripts. Pruébelo a menos que haya problemas de seguridad en cuanto a por qué necesita programar la llamada.