I'm trying to toggle between a moon icon and a sun icon on a dark mode project. The original javascript code was simply a button that switched from day mode to dark mode. After some research, I ended up with the following code, which "kinda" works but is sketchy; it switches from day mode to dark mode and the icon toggles from moon to sun BUT, when I come back to the page after setting my preference as dark mode (or refreshing the page in dark mode), the icon disappears.
const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
icon.classList.toggle("fa-sun-o");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
icon.classList.toggle("fa-moon-o");
}
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme")
? "light"
: "dark";
icon.classList.toggle("fa-sun-o");
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme")
? "dark"
: "light";
icon.classList.toggle("fa-moon-o");
}
localStorage.setItem("theme", theme);
});
Any idea what I am missing here?
I created a codepen to show the issue
As others have said, you were using a toggle method which was producing inconsistent behaviour.
I refactored the code a bit:
const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const makeDark = () => {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
icon.classList.add("fa-moon-o");
icon.classList.remove("fa-sun-o");
}
const makeLight = () => {
document.body.classList.remove("dark-theme");
document.body.classList.add("light-theme");
icon.classList.remove("fa-moon-o");
icon.classList.add("fa-sun-o");
}
const setPageThemeTo = (newLightDarkState) => {
newLightDarkState == "dark" ? makeDark() : makeLight();
}
let currentTheme = localStorage.getItem("theme");
if (!currentTheme) {
currentTheme = prefersDarkScheme.matches ? 'dark' : 'light';
}
setPageThemeTo(currentTheme);
btn.addEventListener("click", function () {
currentTheme = currentTheme == "dark" ? "light" : "dark";
localStorage.setItem("theme", currentTheme);
setPageThemeTo(currentTheme);
});
You could probably DRY it up further! :)
You need to toggle both classes each time you want to make a switch.
Your code was using the toggle method as though it would swap moon for sun but it really just toggles whether the individual class is there. I've toggled both classes when we need to make a change, and commented out the local storage stuff to avoid JS errors with the SO snippet, but otherwise didn't change your code.
const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// const currentTheme = localStorage.getItem("theme");
// if (currentTheme == "dark") {
// document.body.classList.toggle("dark-theme");
// icon.classList.toggle("fa-moon-o");
// }
btn.addEventListener("click", function() {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme") ?
"light" :
"dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme") ?
"dark" :
"light";
}
icon.classList.toggle("fa-moon-o");
icon.classList.toggle("fa-sun-o");
// localStorage.setItem("theme", theme);
});body {
--text-color: #555;
--bkg-color: #fff;
}
body.dark-theme {
--text-color: #999;
--bkg-color: #222;
}
body {
background: var(--bkg-color, #fff);
color: var(--text-color, #555);
}
.btn-mode {
background: #000;
font-size: 20px;
padding: 10px 10px;
width: 50px;
cursor: pointer;
color: #fff;
display: block;
text-align: center;
}
.btn-mode:hover {
color: #da0000;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="light-theme">
<h1>Some title</h1>
<ul>
<li class="btn-mode">
<i class="mode fa fa-sun-o"></i>
</li>
</ul>
</body </html>