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);
};

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);
  }
});

Answer 2

localStorage 根据您网站的来源保存键/值对。 如果您的应用程序使用多个源，那么您每次切换源时都必须管理键/值对。 如果是这种情况，那么您应该考虑将此信息保存在后端。

Answer 3

我已经在另一个网站上做过这件事。 我在下面拼凑了一个最小的例子。 下面的代码段没有将代码用于您的预期目的。 请参阅本文底部的完整源代码。

 const toggleTheme = () => { // Theme toggle button. const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); function switchTheme(e) { let darkModeEnabled = e.target.checked; document.documentElement.setAttribute('data-theme', darkModeEnabled ? 'dark' : 'light'); localStorage.setItem('theme', darkModeEnabled ? 'dark' : 'light'); } toggleSwitch.addEventListener('change', switchTheme, false); // Restore theme state. const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } } toggleTheme();

 .as-console-wrapper { display: none !important; } :root { --foreground-color: #000; --background-color: #FFF; --link-color: #07D; } body { background: var(--background-color); color: var(--foreground-color); } a, a:visited { color: var(--link-color); } h1, nav { text-align: center; } nav { display: flex; flex-direction: row; justify-content: space-evenly; padding: 0.5em; } nav a { text-decoration: none; } header { position: relative; } header input[type="checkbox"] { position: absolute; right: 1em; } /** Dark theme */ [data-theme="dark"] { --foreground-color: #EEE; --background-color: #111; --link-color: #5AF; }

 <header> <div class="theme-switch"> <input type="checkbox" /> </div> </header> <nav> <a href="#">Home</a> <a href="#">About</a> </nav> <section> <h1>Home</h1> </section> <footer> </footer>

完整的源代码

js/script.js

window.addEventListener('DOMContentLoaded', event => {
  toggleTheme();
});

const toggleTheme = () => {
  // Theme toggle button.
  const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  function switchTheme(e) {
    let darkModeEnabled = e.target.checked;
    document.documentElement.setAttribute('data-theme', darkModeEnabled ? 'dark' : 'light');
    localStorage.setItem('theme', darkModeEnabled ? 'dark' : 'light');
  }
  toggleSwitch.addEventListener('change', switchTheme, false);

  // Restore theme state.
  const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
      toggleSwitch.checked = true;
    }
  }
}

css/default.css

:root {
  --foreground-color: #000;
  --background-color: #FFF;
  --link-color: #07D;
}

body {
  background: var(--background-color);
  color: var(--foreground-color);
}

a, a:visited {
  color: var(--link-color);
}

h1,
nav {
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0.5em;
}

nav a {
  text-decoration: none;
}

header {
  position: relative;
}

header input[type="checkbox"] {
  position: absolute;
  right: 1em;
}

css/dark.css

[data-theme="dark"] {
  --foreground-color: #EEE;
  --background-color: #111;
  --link-color: #5AF;
}

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    <link href="css/default.css" rel="stylesheet" />
    <link href="css/dark.css" rel="stylesheet" />
    <script src="js/script.js"></script>
  </head>
  <body>
    <header>
      <div class="theme-switch">
        <input type="checkbox" />
      </div>
    </header>
    <nav>
      <a href="./index.html">Home</a>
      <a href="./about.html">About</a>
    </nav>
    <section>
      <h1>Home</h1>
    </section>
    <footer>
    </footer>
  </body>
</html>

关于.html

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
    <link href="css/default.css" rel="stylesheet" />
    <link href="css/dark.css" rel="stylesheet" />
    <script src="js/script.js"></script>
  </head>
  <body>
    <header>
      <div class="theme-switch">
        <input type="checkbox" />
      </div>
    </header>
    <nav>
      <a href="./index.html">Home</a>
      <a href="./about.html">About</a>
    </nav>
    <section>
      <h1>About</h1>
    </section>
    <footer>
    </footer>
  </body>
</html>

Answer 4

当您使用 css 变量时，您可以更改变量值。

 function changecolour() { let c = document.getElementById("pickbackground").value; document.documentElement.style.setProperty("--mystyle", c); }

 :root { --mystyle:green; } span { background-color:var(--mystyle); color:white; }

 <span>This is some text</span> <br> <hr> <select id="pickbackground" onclick="changecolour();"> <option value="green">Green</option> <option value="blue">Blue</option> <option value="red">Red</option> </select>

而且，您仍然可以使用本地存储代码来保存他们的选择。