刷新页面时关闭暗模式

Question

function darkMode() {
  var element = document.body;
  var content = document.getElementById("DarkModetext");
  element.className = "darkmode11"
  content.innerText = "Dark Mode is ON"
  content.style.color = "white"
}
function lightMode() {
  var element = document.body
  var content = document.getElementById("DarkModetext")
  content.innerText = "Dark Mode is OFF"
  element.className = "lightmode11"
  content.style.color = "black"
}

//I have made two function one is for darkmode and another is for light mode the problem is when i turn on the dark mode and refresh the page the dark mode get turned off

Answer 1

You have to save mode setting somewhere like cookies or localStorage. Code below does this for you hope this is helpful. script type='module' means this script runs before page load so page doesnt flash white to black.

    <script type="module">
if(localStorage.getItem('mode') == 'dark'){
    darkmode();
    }

    function darkMode() {
      localStorage.setItem("mode","dark");
      var element = document.body;
      var content = document.getElementById("DarkModetext");
      element.className = "darkmode11"
      content.innerText = "Dark Mode is ON"
      content.style.color = "white"
    }
    function lightMode() {
      localStorage.setItem("mode","light");
      var element = document.body
      var content = document.getElementById("DarkModetext")
      content.innerText = "Dark Mode is OFF"
      element.className = "lightmode11"
      content.style.color = "black"
    }
</script>

Answer 2

您可以轻松地在 localStorage 中存储暗模式是否打开。

 localStorage.setItem("theme", "dark");