作者firesnake (灵魂意念拉扯)
看板Programming
标题[闲聊] 这个toggleMode切换dark mode
时间Wed Jan 17 14:08:56 2024
这个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
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.162.134.202 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Programming/M.1705471740.A.C7D.html
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:09:59
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:10:05
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:10:13
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:10:34
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:11:13
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:11:19
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:11:29
※ 编辑: firesnake (1.162.134.202 台湾), 01/17/2024 14:11:32
1F：→ cloki: 你CSS那个scope究竟是css还是scss...? 86.29.190.25 01/17 18:29
2F：→ firesnake: 是css 後来已经解决了 是因为我的文字 211.75.132.180 01/19 08:59
3F：→ firesnake: 很多都包在<div> tag 李 211.75.132.180 01/19 08:59
4F：→ firesnake: 後来css加了定义div color 就可以了 211.75.132.180 01/19 08:59