javascript - JavaScript 中的持久暗模式

Question

我有一个可以在我的网站上切换暗模式的开关。当我打开另一个页面时，我希望它是持久的。这是我切换它的原始代码：

var checkbox = document.querySelector("input[name=theme]");

checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
  }
});

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

但是，我现在正在尝试使用本地存储来使更改在其他网页上持久化，但这并没有发生。它甚至不再切换黑暗主题。我哪里出错了，我应该改变什么？我已经搜索了该站点，但没有人像我正在做的那样真正做到这一点。我是 JS 的新手，所以在我选择另一个解决方案之前，我想了解出了什么问题。

任何帮助，将不胜感激。

var checkbox = document.querySelector("input[name=theme]");

var theme;
if (localStorage.getItem("data-theme")) {
  theme = localStorage.getItem("data-theme");
  trans();
  document.documentElement.setAttribute("data-theme", theme);
} else {
  theme = "light";
  localStorage.setItem("data-theme", theme);
}
checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
    theme = "dark";
    localStorage.setItem("data-theme", theme);
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
    theme = "light";
    localStorage.setItem("data-theme", theme);
  }
});

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

标签： javascript

Answer 1

我想下面的代码会起作用。trans您应该在使用它之前初始化变量。

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

var checkbox = document.querySelector("input[name=theme]");

var theme;
if (localStorage.getItem("data-theme")) {
  theme = localStorage.getItem("data-theme");
  trans();
  document.documentElement.setAttribute("data-theme", theme);
} else {
  theme = "light";
  localStorage.setItem("data-theme", theme);
}
checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
    theme = "dark";
    localStorage.setItem("data-theme", theme);
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
    theme = "light";
    localStorage.setItem("data-theme", theme);
  }
});