Question

我正在将W3Scholls Dark Mode Toggle用于我的网站，并且运行良好。

但是在刷新页面后，将显示默认视图，即“日间模式”。

如何设置cookie，以便如果用户选择暗模式，则默认情况下以暗模式打开页面？

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

谢谢

Answer 1

您可以为此使用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>

如何为暗/亮模式切换保存cookie？

1 个答案: