时间戳

首页 > 解决方案 > 加载页面时如何防止暗模式重置？

javascript - 加载页面时如何防止暗模式重置？

问题描述

我读到本地存储或会话存储都可以解决问题，但我很难让它发挥作用。

function changeStyleByClass(className, classToggle){
var element = document.getElementsByClassName(className);
for (var i=0; i < element.length; i++) {
    element[i].classList.toggle(classToggle);
}}
document.getElementById("bulb").addEventListener("click", () => {
changeStyleByClass("bgcolor-lightdark", "dark-mode");
changeStyleByClass("nav", "dark-mode");
changeStyleByClass("nav-item", "dark-mode");
changeStyleByClass("card", "dark-mode");
changeStyleByClass("container", "dark-mode");
changeStyleByClass("bulbicon","dark-mode");});

我想浏览页面并仍然保留当前打开的主题。

提前致谢！

标签： javascript

解决方案

您可以使用localStorage.setItem来存储数据和localStorage.getItem检索数据。我注意到的一件事是您的灯泡按钮打开了暗模式，但没有关闭暗模式。我有一个解决方案，它还可以简化您更改主题的过程。

var togButton = document.getElementById("togButton");

//Check localStorage
//It's commented out because it doesn't work in Stack Overflow snippet
//darkOn = localStorage.getItem("dark") == "true" ? true : false;
setTheme();

function setTheme(){
  //Save to localStorage
  //It's commented out because it doesn't work in Stack Overflow snippet
  //localStorage.setItem("dark", darkOn ? "true" : "false");
  if(darkOn){
    document.body.setAttribute("theme", "dark");
    togButton.innerHTML = "Turn off dark mode.";
  }
  else{
    document.body.setAttribute("theme", "light");
    togButton.innerHTML = "Turn on dark mode.";
  }
}

var darkOn = false;
function toggle(){
  darkOn = !darkOn;
  setTheme();
}

togButton.addEventListener("click", toggle);
/*By doing body[theme=dark] it only takes effect if the <body> tag has an attribute called theme which is dark.*/

body[theme=light] .sampleClass{
  color: black;
  background-color: white;
}

body[theme=dark] .sampleClass{
  color: mediumseagreen;
  background-color: black;
}
<body>
  <h1 class="sampleClass">Theme changes.</h1>
  <button id="togButton">Turn on dark mode.</button>
</body>

这种方法更简单，因为您不需要手动键入所有要转换为暗模式的类，只需在 CSS 文件中设置 bot 暗模式和亮模式即可。

我希望你了解 javascript + css。祝你好运，如果你不能理解其中的一部分，请问我。

setTheme()编辑：马上打电话。

编辑2：解释

localStorage.getItem("dark") == "true" ? true : false"被称为turnary的部分。turnary 语法是条件？真值：假值。基本上和做的事情是一样的

if(localStorage.getItem("dark") == "true"){
    darkOn = true;
}
else{
    darkOn = false;
}

这是因为 localStorage 就像Map键和值都是字符串的地方。

继续下一部分。 darkOn = false;只需声明变量darkOn，默认为 if false。切换功能变为darkOn与其相反的功能。感叹号否定布尔值，所以darkOn = !darkOn;转向如果它以前是，darkOn如果它以前是假的。falsetruetrue

然后它调用该setTheme函数来更新标签theme中的属性<body>，从而导致 css 发生变化。它还将当前值保存到localStorage.

推荐阅读