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 >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 >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>
```CodePudding user response：
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");
}
});
CodePudding user response：
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
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)
});