作者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/m.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