[閒聊] 這個toggleMode切換dark mode

[firesnake (靈魂意念拉扯)]

這個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
→ cloki: 你CSS那個scope究竟是css還是scss...?
→ firesnake: 是css 後來已經解決了 是因為我的文字
→ firesnake: 很多都包在<div> tag 李
→ firesnake: 後來css加了定義div color 就可以了