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?