I have themes.css (stores css variables for themes), index.html, themes.html, script.js, about_us.html files in my project . Why does the theme not change for all the .html files?
Themes.css looks like this:
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;
}
This sets the body classes. If the body class is dracula then the theme is dracula. It runs a script to change the theme.
script.js
document.querySelector(".dracula_theme").addEventListener("click", () => {
document.body.className = "dracula";
});
document.querySelector(".default").addEventListener("click", () => {
document.body.className = "";
});
This script only changes the color of themes.html. It is run in themes.html.
So is there a better way to do this? Or Can I change something in this to get my result?
It may be a matter of preference, but I always use <link rel="stylesheet" href="styles.css">. In my experience it works flawlessly, and hasn't the glitches that scripts often have. Give that a try unless there are security concerns as to why you need to script the call.