我目前正在一個網站上作業，試圖為網站的樣式構建一個設定頁面，但我正在嘗試使用帶有 .css 和 .js 的不同頁面，因此它不僅僅適用于一個頁面，它適用于所有頁面網站上的頁面。
有人可以幫我解決這個問題嗎？這是我的電流。CSS.css（我的 CSS）頁面和 JS.js（我的 JavaScript）頁面。
const toggle = document.getElementById("toggle");
const refresh = document.getElementById("refresh");
const theme = window.localStorage.getItem("theme");
/* verifica se o tema armazenado no localStorage é escuro
se sim aplica o tema escuro ao body */
if (theme === "dark") document.body.classList.add("dark");
// event listener para quando o bot?o de alterar o tema for clicado
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
if (theme === "dark") {
window.localStorage.setItem("theme", "light");
} else window.localStorage.setItem("theme", "dark");
});
refresh.addEventListener("click", () => {
window.location.reload();
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Defini??o das cores */
body {
/* cores de texto */
--text-white: #ffffff;
--text-dark: #142136;
/* cores de fundo */
--bg-grey-light: #f5f5f5;
--bg-white: #ffffff;
--bg-blue-dark: #142136;
--bg-indigo: #6366f1;
font-family: "Inter", sans-serif;
line-height: 1.7;
background-color: var(--bg-grey-light);
}
.dark {
--text-white: #e6e6e6;
--text-dark: #ffffff;
--bg-grey-light: #142136;
--bg-white: #22395d;
--bg-blue-dark: #142136;
--bg-indigo: #7577e1;
}
.container {
max-width: 600px;
margin: 40px auto;
display: flex;
padding: 20px;
flex-direction: column;
}
.text-wrapper {
width: 100%;
padding: 20px;
background-color: var(--bg-white);
margin-bottom: 40px;
border-radius: 10px;
}
.paragraph {
font-size: 16px;
color: var(--text-dark);
}
.heading {
font-size: 40px;
letter-spacing: 1px;
font-weight: 900;
margin-bottom: 40px;
color: var(--text-dark);
}
.buttons {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.button {
width: 200px;
padding: 5px;
height: 40px;
border: none;
border-radius: 10px;
font-family: inherit;
cursor: pointer;
background-color: var(--bg-indigo);
color: var(--text-white);
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Dark mode Tutorial</title>
</head>
<body>
<div class="container">
<h1 class="heading">
Dark/Light theme switcher with HTML, CSS & Javascript Only
</h1>
<div class="buttons">
<!-- bot?o para fazer a troca de estados dark/light -->
<button id="toggle" class="button">toggle</button>
<!-- bot?o para atualizar a página -->
<button id="refresh" class="button">refresh</button>
</div>
<div class="text-wrapper">
<p class="paragraph">
The United States shall be President of the States now existing shall
think proper to admit, shall not be questioned in any Department or
executed, and shall Commission all the Persons voted for, and
Conviction of, Treason, Bribery, or other Property belonging to the
which he was elected, be appointed to any civil Office under the
United States, at the time of the State Legislature.
</p>
</div>
<div class="text-wrapper">
<p class="paragraph">
Why, there's hardly enough of me left to make ONE respectable person!'
Soon her eye fell on a little glass box that was lying on the top of
her head though the doorway; `and even if I fell off the top of the
house!' (Which was very likely it can talk: at any rate, there's no
half afraid that it was only a mouse that had slipped in like herself.
`As wet as ever,' said Alice in a great hurry to change the subject of
must go by the carrier,' she thought; `and how funny it'll seem to dry
and she ran with all her knowledge of history, Alice had not a VERY
good opportunity for showing off her knowledge, as there was no `One,
two, three, and away,' but they began running when they liked, so that
it was too slippery; and when Alice had been all the way I want to go!
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>uj5u.com熱心網友回復：
您不僅需要存盤單個切換狀態（a themeof lightor dark），還需要存盤每個頁面的這種狀態。使用路徑名作為鍵。
// Set the theme from storage on pageload:
if (!localStorage.darkThemesByPage) {
localStorage.darkThemesByPage = '{}';
}
const darkThemesByPage = JSON.parse(localStorage.darkThemesByPage);
const { pathname } = window.location;
if (darkThemesByPage[pathname]) {
document.body.classList.add("dark");
}
// Change the state in storage when the user wants to change theme:
const toggleDarkThemeForPage = () => {
// Retrieve storage again to preserve changes made on other pages
// after this page was loaded
const darkThemesByPage = JSON.parse(localStorage.darkThemesByPage);
darkThemesByPage[pathname] = !darkThemesByPage[pathname];
localStorage.darkThemesByPage = JSON.stringify(darkThemesByPage);
// Apply the new state of the theme after being toggled:
document.body.classList.toggle("dark", darkThemesByPage[pathname]);
};
然后toggleDarkThemeForPage在需要切換時呼叫，例如：
toggle.addEventListener("click", toggleDarkThemeForPage);
我對上面存盤中的物件值使用布林值，因為它會使明暗之間的切換更容易——你只需要反轉當前狀態的真實性。然后做
document.body.classList.toggle("dark", darkThemesByPage[pathname]);
如果值為 true，將應用dark該類，否則將洗掉該類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/517451.html