更改主题并将其存储在本地存储中

Question

我有两个主题“dark”和“light”，我希望主题在点击span时改变

现在，这是有效的。但我希望将此更改保存在本地存储中，因此即使在重新加载页面后，主题仍保持不变。

这是我的代码：

    <span class="theme"
      ><span class="fa-solid fa-circle"></span
      ><span class="fa-solid fa-circle"></span>
    </span> 

const changeColor1 = document.querySelector(".theme span:first-child "),
  changeColor2 = document.querySelector(".theme span:last-child "),
  info = document.querySelector(".info-container"),
  back = document.querySelectorAll(".back");

changeColor1.addEventListener("click", () => {
  document.body.style.backgroundColor = "#fff";
  info.classList.add("theme-light");
  back.forEach((change) => {
    change.classList.add("theme-light");
  });
});

changeColor2.addEventListener("click", () => {
  document.body.style.backgroundColor = "#1f1a24";
  info.classList.remove("theme-light");
  back.forEach((change) => {
    change.classList.remove("theme-light");
  });
});