在 html 网站中添加一个按钮以更改为暗模式

Question

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!

Answer 1

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>

Answer 2

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";
 }

Answer 3

 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>

Answer 4

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>