无法将当前的光/暗模式设置为本地存储

发布于 2025-02-08 06:13:17 字数 3577 浏览 1 评论 0原文

我是JavaScript初学者，我正在尝试集成一个简单的灯光模式按钮。我网站的默认值是“黑暗”模式。因此，JS/CSS的黑暗模式正常。如果激活了光模式，则整个（外部）CSS将被替换，并且看起来确实很棒。

但是，这是我的问题； CSS的当前模式未保存在本地存储中。因此，当用户移至下一个HTML页面时，默认的黑模式又返回。

我已经找到了许多（确实很多）文章/论坛帖子等，并测试了许多示例代码（组合等），但它们都不适合我。

这是我的JS代码，也是我的HTML/CSS的一小部分。我已经将其分为单个片段，因为我认为该片段无法可视化多个HTML/CSS文件，因此您可能必须在本地保存和编辑页面。

当然，我的问题是；我需要在代码中更改什么，以便将当前的Dark/LightMode设置存储在本地存储中并在页面开关/重新加载等上访问？

非常感谢您提前的努力！ :)

```
 /* This is the light mode css */
 
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: white;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: black;
text-align: center;
}
.btn-toggle {
background: white;
}

```

```

 /* This is the dark mode css */
 
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: white;
text-align: center;
}
.btn-toggle {
background: white;
}

```

```

<!-- this is the first HTML page --> 

<!doctype html>
<html lang="en-gb">
<head>

   <link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
   
</head>

<body>

<h1>Toggle Dark/lightmode example</h1>

<button class="btn-toggle">Toggle dark/light</button>
<a href="test2.html"><button>Go to Site 2</button></a>

<h2>Unnecessary content</h2>

<script type="text/javascript" src="darkmode.js"></script>

```

```

<!-- this is the second page -->

<!doctype html>
<html lang="en-gb">
<head>

   <link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
   
</head>

<body>

<h1>Toggle Dark/lightmode example</h1>

<button class="btn-toggle">Toggle dark/light</button>
<a href="test1.html"><button>Go back to Site 1</button></a>

<h2>Unnecessary content</h2>

<script type="text/javascript" src="darkmode.js"></script>

<script>

// The JS file is usually eternally linked

// Select the button
const btn = document.querySelector(".btn-toggle");
// Select the stylesheet <link>
const theme = document.querySelector("#theme-link");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}
// Listen for a click on the button
btn.addEventListener("click", function() {
  // If the current URL contains "dark-theme.css"
  if (theme.getAttribute("href") == "kiblsstyle.css") {
// ... then switch it to "light-theme.css"
theme.href = "kiblsstylelight.css";
  // Otherwise...
  } else {
// ... switch it to "dark-theme.css"
theme.href = "kiblsstyle.css";
  }
  localStorage.setItem("theme", theme);
});
</script>

</body>
</html>

```

原文

I am a javascript beginner and I am trying to integrate a simple light mode button. The default for my website is the dark mode. So the JS/CSS dark and light mode works fine. If the light mode is activated, the whole (external) CSS will be just replaced and it looks really great.

However here is my problem; The current mode of the CSS is not saved in the local storage. So when the user moves to the next HTML page, the default dark mode is back again.

I have already found many (really many) articles/forum posts etc. and tested a lot of sample codes (combined them etc.) but none of them worked for me.

Here is my JS code and a small part of my HTML/CSS. I've broken it up into individual snippets, because I assume that the snippet cannot visualize multiple HTML/CSS files, so you probably have to save and edit the pages locally.

Of course my question is; what do I need to change in the code so that the current Dark/LightMode setting is stored in the local storage and accessed on a page switch/reload etc.?

Thanks a lot for your effort in advance! :)

```
 /* This is the light mode css */
 
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: white;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: black;
text-align: center;
}
.btn-toggle {
background: white;
}

```

```

 /* This is the dark mode css */
 
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
font-size: 30px;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
margin: 40px 0 20px 0;
}
h2 {
font-size: 20px;
color: white;
text-align: center;
}
.btn-toggle {
background: white;
}

```

```

<!-- this is the first HTML page --> 

<!doctype html>
<html lang="en-gb">
<head>

   <link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
   
</head>

<body>

<h1>Toggle Dark/lightmode example</h1>

<button class="btn-toggle">Toggle dark/light</button>
<a href="test2.html"><button>Go to Site 2</button></a>

<h2>Unnecessary content</h2>

<script type="text/javascript" src="darkmode.js"></script>

```

```

<!-- this is the second page -->

<!doctype html>
<html lang="en-gb">
<head>

   <link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">
   
</head>

<body>

<h1>Toggle Dark/lightmode example</h1>

<button class="btn-toggle">Toggle dark/light</button>
<a href="test1.html"><button>Go back to Site 1</button></a>

<h2>Unnecessary content</h2>

<script type="text/javascript" src="darkmode.js"></script>

<script>

// The JS file is usually eternally linked

// Select the button
const btn = document.querySelector(".btn-toggle");
// Select the stylesheet <link>
const theme = document.querySelector("#theme-link");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}
// Listen for a click on the button
btn.addEventListener("click", function() {
  // If the current URL contains "dark-theme.css"
  if (theme.getAttribute("href") == "kiblsstyle.css") {
// ... then switch it to "light-theme.css"
theme.href = "kiblsstylelight.css";
  // Otherwise...
  } else {
// ... switch it to "dark-theme.css"
theme.href = "kiblsstyle.css";
  }
  localStorage.setItem("theme", theme);
});
</script>

</body>
</html>

```

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃素的狼 2025-02-15 06:13:17

您不应该尝试将整个HTML元素存储在本地存储中。而是尝试存储主题名称，然后有条件地应用您在本地存储中找到的主题。清理后，这是您的JS：

const btn = document.querySelector(".btn-toggle");

const styleLink = document.querySelector("#theme-link");

// Get stored theme with fallback value
const currentTheme = localStorage.getItem("theme") || "light";

if (currentTheme === "dark") styleLink.href = "kiblsstyle.css";
else if (currentTheme === "light") styleLink.href = "kiblsstylelight.css";

btn.addEventListener("click", () => {
    if (styleLink.getAttribute("href") !== "kiblsstyle.css") {
        styleLink.href = "kiblsstyle.css";
        localStorage.setItem("theme", "dark");
    } else {
        styleLink.href = "kiblsstylelight.css";
        localStorage.setItem("theme", "light");
    }
});

You shouldn´t try storing whole html element in local storage. Instead try storing theme name and then conditionally apply theme that you find in local storage. Here is your JS after clean up:

const btn = document.querySelector(".btn-toggle");

const styleLink = document.querySelector("#theme-link");

// Get stored theme with fallback value
const currentTheme = localStorage.getItem("theme") || "light";

if (currentTheme === "dark") styleLink.href = "kiblsstyle.css";
else if (currentTheme === "light") styleLink.href = "kiblsstylelight.css";

btn.addEventListener("click", () => {
    if (styleLink.getAttribute("href") !== "kiblsstyle.css") {
        styleLink.href = "kiblsstyle.css";
        localStorage.setItem("theme", "dark");
    } else {
        styleLink.href = "kiblsstylelight.css";
        localStorage.setItem("theme", "light");
    }
});

回复收藏 0 原文

笨死的猪 2025-02-15 06:13:17

创建localstorage是为了保存简单的，先进的值，并且不打算存储圆顶元素。因此，您只需使用2个主题即可在您的情况下节省布尔值。（当您创建更多它们时，使用几个按钮或数组等）或切换主题标题，但不要使用dom-object

localstorage文章

const theme = document.querySelector("#theme-link");
const currentLightTheme = localStorage.getItem("isLight") || true;
btn.addEventListener("click", function() {
    if (!currentLightTheme) {
        theme.setAttribute('href', 'kiblsstylelight.css');
    } else {
        theme.setAttribute('href', 'kiblsstyle.css');
    }
    localStorage.setItem('isLight', !currentLightTheme)
 });

localStorage was created to save simple, prinitive values and isn't intended to store DOM-elements. So you can just save boolean value in your case with just 2 themes. (When you'll create more of them, use few buttons or array, etc.) Or switch theme title but don't use DOM-object

localStorage article

const theme = document.querySelector("#theme-link");
const currentLightTheme = localStorage.getItem("isLight") || true;
btn.addEventListener("click", function() {
    if (!currentLightTheme) {
        theme.setAttribute('href', 'kiblsstylelight.css');
    } else {
        theme.setAttribute('href', 'kiblsstyle.css');
    }
    localStorage.setItem('isLight', !currentLightTheme)
 });

回复收藏 0 原文

~没有更多了~