Add a button to change to dark mode in html website-CodePudding

I have added a button on my site which let's the users change to dark or light mode whenever they want. I added the button with a moon icon on it, but the problem is that I want that the moon icon changes to sun icon when the user is in dark mode. And changes to moon icon when user is in light mode.

function myfunction(e) {
  console.log("you clicked");
  document.documentElement.classList.toggle("dark-mode");
  document.querySelectorAll(".inverted").forEach((result) => {
    result.classList.toggle("invert");
  });
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

.invert {
  filter: invert(1) hue-rotate(180deg);
}

<button class="btn"><img src='moon.png'></img></button>

The .inverted class in js is because I don't want the images to invert their colors.. so I gave all the images a class='inverted'

So, this is what I've done and someone please let me know how I should change the icon to moon and sun depending on the current mode (light or dark)

Thanks!

CodePudding user response：

You could add the sun as another image to the button and change the visibility of the two images via your .dark-mode css class.

So whenever the .dark-mode class is present the moon gets hidden and the sun gets shown.

function myfunction(e) {
  console.log("you clicked");
  document.documentElement.classList.toggle("dark-mode");
  document.querySelectorAll(".inverted").forEach((result) => {
    result.classList.toggle("invert");
  });
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

.invert {
  filter: invert(1) hue-rotate(180deg);
}


/* button handling */

.moon {
  display: block;
}

.sun {
  display: none;
}

.dark-mode .moon {
  display: none;
}

.dark-mode .sun {
  display: block;
}

<button class="btn">
  <img class="moon" src="moon.png" alt="moon"></img>
  <img class="sun" src="sun.png" alt="sun"></img>
</button>

CodePudding user response：

function myfunction(e) {
  const doc = document.documentElement
  doc.classList.toggle("dark-mode");

  document.querySelectorAll(".inverted").forEach((result) => {
    result.classList.toggle("invert");
  });



  const img = e.currentTarget.querySelector('img')
  if (doc.classList.contains('dark-mode')) {
    img.src = 'sun.png'
  } else {
    img.src = 'moon.png'
  }

}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);

.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

.invert {
  filter: invert(1) hue-rotate(180deg);
}

'

<button class="btn"><img src='moon.png' />
Toggle Dark mode
</button>

CodePudding user response：

You could go with the CSS approach as in @Fabian's answer. If you would like to go with JS, you could simply use a flag to indicate whether or not the user switched to dark mode, and dynamically set the icon based on it.

let isDarkMode = document.documentElement.classList.contains("dark-mode");
function myfunction(e) {
    document.documentElement.classList.toggle("dark-mode");
    document.querySelectorAll(".inverted").forEach((result) => {
        result.classList.toggle("invert");
    });
    e.currentTarget.querySelector("img").src = isDarkMode ? "sun.png" : "moon.png";
 }

CodePudding user response：

You can use the below reference for the toggle button from light mode to dark mode and dark mode to light mode.

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slot {
  position: relative;
  height: 10em;
  width: 20em;
  border: 5px solid #e4e7ec;
  border-radius: 10em;
  background-color: white;
  box-shadow: 0px 10px 25px #e4e7ec;
  transition: background-color 250ms;
}

.toggle-checkbox:checked ~ .toggle-slot {
  background-color: #374151;
}

.toggle-button {
  transform: translate(11.75em, 1.75em);
  position: absolute;
  height: 6.5em;
  width: 6.5em;
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.75em white;
  transform: translate(1.75em, 1.75em);
}

.sun-icon {
  position: absolute;
  height: 6em;
  width: 6em;
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: 6em;
  width: 6em;
  opacity: 1;
  transform: translate(2em, 2em) rotate(15deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(3em, 2em) rotate(0deg);
}

.moon-icon {
  position: absolute;
  height: 6em;
  width: 6em;
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: 6em;
  width: 6em;
  opacity: 0;
  transform: translate(11em, 2em) rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(12em, 2em) rotate(-15deg);
}

<head>
  <script src="https://code.iconify.design/1/1.0.4/iconify.min.js">   </script>
</head>
<label>
  <input class='toggle-checkbox' type='checkbox'>
  <div class='toggle-slot'>
    <div class='sun-icon-wrapper'>
      <div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
    </div>
    <div class='toggle-button'></div>
    <div class='moon-icon-wrapper'>
      <div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
    </div>
  </div>
</label>