[閒聊] 這個toggleMode切換dark mode

看板Programming作者firesnake (靈魂意念拉扯)時間3月前 (2024/01/17 14:09)推噓0(0推 0噓 4→)

留言4則, 2人參與討論串1/1

這個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://www.ptt.cc/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