Being a beginner in JavaScript, I am currently working on implementing a simple light mode button for my website which defaults to dark mode. The transition between JS/CSS dark and light modes is seamless, giving the site an appealing look when switching to light mode.
However, I have encountered an issue where the current CSS mode is not saved in local storage. This results in the default dark mode being displayed when users navigate to a different HTML page.
Despite researching numerous articles and forum posts, as well as testing various code samples, I have been unsuccessful in finding a solution. Below, you'll find snippets of my JS code along with a portion of my HTML/CSS.
My main question is: How can I modify the code to ensure that the current Dark/Light Mode setting is stored in local storage and accessed upon page reload or switching?
Thank you in advance for your assistance! :)
/* 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;
}
/* 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;
}
<!-- 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>
<!-- 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");
}
btn.addEventListener("click", function() {
if (theme.getAttribute("href") == "kiblsstyle.css") {
theme.href = "kiblsstylelight.css";
} else {
theme.href = "kiblsstyle.css";
}
localStorage.setItem("theme", theme);
});
</script>
</body>
</html>