在 html 網站中添加一個按鈕以更改為暗模式

Question

我在我的網站上添加了一個按鈕，讓用戶可以隨時更改為暗模式或亮模式。 我添加了帶有月亮圖標的按鈕，但問題是我希望當用戶處於黑暗模式時月亮圖標變為太陽圖標。 並在用戶處於光照模式時更改為月亮圖標。

 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>

js 中的 .inverted 類是因為我不希望圖像反轉它們的顏色..所以我給所有圖像一個 class='inverted'

所以，這就是我所做的，有人請告訴我如何根據當前模式（亮或暗）將圖標更改為月亮和太陽

謝謝！

Answer 1

您可以將太陽作為另一個圖像添加到按鈕，並通過您的.dark-mode css 類更改兩個圖像的可見性。

因此，每當.dark-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 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

您可以采用@Fabian 的回答中的 CSS 方法。 如果你想用 JS，你可以簡單地使用一個標志來指示用戶是否切換到暗模式，並根據它動態設置圖標。

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

您可以將以下參考用於從亮模式到暗模式以及從暗模式到亮模式的切換按鈕。

 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>