更改多个HTML文件的主题?

Question

我有themes.css(存储主题的css变量)，index.html, themes.html, script.js, about_us.html文件在我的项目。为什么不更改所有.html文件的主题?

theme .css看起来像这样:

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;
}

设置主体类。如果主体类是德古拉那么主题就是德古拉。它运行一个脚本来改变主题。

script.js

document.querySelector(".dracula_theme").addEventListener("click", () => {
document.body.className = "dracula";
});
document.querySelector(".default").addEventListener("click", () => {
document.body.className = "";
});

这个脚本只改变theme .html的颜色。在themes.html中运行。

那么有更好的方法来做到这一点吗?或者我可以改变一些东西来得到我的结果吗?

Answer 1

这可能是一个偏好问题，但我总是使用<link rel="stylesheet" href="styles.css">。根据我的经验，它可以完美地工作，并且没有脚本经常出现的小故障。请尝试一下，除非您需要编写调用脚本的原因存在安全问题。