如何保存深色/浅色模式切换的 cookie？

我正在使用W3Schools 深色模式切换对于我的网站，它运行得很好。

但在我刷新页面后，就会显示默认视图“日间模式”。

This is 网页测试页。

如何设置 cookie，以便如果用户选择深色模式，则页面默认以深色模式打开？

另外，如何将其应用于整个网站，以便用户不必每次打开页面时都按按钮。

你可以使用localStorage为了这。

// On page load set the theme.
(function() {
  let onpageLoad = localStorage.getItem("theme") || "";
  let element = document.body;
  element.classList.add(onpageLoad);
  document.getElementById("theme").textContent =
    localStorage.getItem("theme") || "light";
})();

function themeToggle() {
  let element = document.body;
  element.classList.toggle("dark-mode");

  let theme = localStorage.getItem("theme");
  if (theme && theme === "dark-mode") {
    localStorage.setItem("theme", "");
  } else {
    localStorage.setItem("theme", "dark-mode");
  }

  document.getElementById("theme").textContent = localStorage.getItem("theme");
}

HTML:

<button type="button" onclick="themeToggle()">Theme Toggle</button>
<div id="theme"></div>