这个toggle mode 切换dark mode/light mode
不知道哪里出了问题
code是bard生成的
css:
body {
/* Light mode styles */
background-color: white;
color: black;
}
body.dark-theme {
/* Dark mode styles */
background-color: black;
color: white;
textarea {
background-color: black;
color: white; /* Optional: Set text color to white for better
readability */
border-style: dashed; /* Example: Set a dashed border */
}
a {
color: #6C9AB0; /* You can use any valid color value */
}
}
javascript:
const toggleThemeButton = document.getElementById("toggle-theme");
const body = document.body;
let currentTheme = null;
function toggleTheme() {
if (currentTheme === "dark") {
body.classList.remove("dark-theme");
body.style.color = ""; // Reset text color to default
localStorage.setItem("theme", "light");
currentTheme = "light";
toggleThemeButton.textContent = "Dark Mode";
} else {
body.classList.add("dark-theme");
body.style.color = "#fff"; // Set text color for dark theme
localStorage.setItem("theme", "dark");
currentTheme = "dark";
toggleThemeButton.textContent = "Light Mode";
}
// Force a reflow
body.offsetHeight;
}
toggleThemeButton.addEventListener("click", toggleTheme);
// Check for saved theme preference
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
toggleTheme(); // Apply dark mode if saved preference is dark
}
html:
<button id='toggle-theme'>Dark Mode</button>
实际状况：用edge 和chrome 可以正确切换背景色和textarea 背景色和<a href>
tag的颜色 但是文字部分的颜色一定要F5 or 重整页面后
才会变色 不知道该怎么修正
用Safari的话倒是可以正确切换所有文字颜色，除了textarea背景颜色又没有正确切换
实装网页
https://cloudliter.com/start.php