'Icon toggle disappears on refresh

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

javascripthtmlcssfont-awesome


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JasonB

Related Questions