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

【问题标题】：Add a button to change to dark mode in html website在 html 网站中添加一个按钮以更改为暗模式
【发布时间】：2021-11-12 10:38:43
【问题描述】：

我在我的网站上添加了一个按钮，让用户可以随时更改为深色或浅色模式。我添加了带有月亮图标的按钮，但问题是我希望当用户处于黑暗模式时月亮图标变为太阳图标。并在用户处于光照模式时更改为月亮图标。

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

&lt;button class="btn"&gt;&lt;img src='moon.png'&gt;&lt;/img&gt;&lt;/button&gt;

js 中的 .inverted 类是因为我不希望图像反转它们的颜色.. 所以我给所有图像一个 class='inverted'

所以，这就是我所做的，请让我知道如何根据当前模式（亮或暗）将图标更改为月亮和太阳

谢谢！

【问题讨论】：

你能用background-image代替吗？然后你可以从你的 CSS 中设置合适的图片 URL。
我没有看到您更改图标的 sn-p。只需检查用户处于什么模式并设置图标动态。那不是魔法。你们几乎什么都在一起。
我不认为它作为背景图片看起来不错，不过感谢您的回答:)
感谢马克的回答！但是问题是我开始Web开发只有1-2周，所以我不知道如何根据用户当前的模式更改图标。所以，如果你能详细说明一下。谢谢！:)

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案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";
 }

【讨论】：

@Khushhal - 我已将答案编辑为更准确和简洁。请查看更改。

【解决方案3】：

您可以将以下参考用于切换按钮从浅色模式到深色模式以及深色模式到浅色模式。

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>

【讨论】：

【解决方案4】：

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')
  const label = e.currentTarget.querySelector('span')
  if (doc.classList.contains('dark-mode')) {
    img.src = 'sun.png'
    label.innerHTML = 'Light mode'
  } else {
    img.src = 'moon.png'
    label.innerHTML = 'Dark mode'
  }

}
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' alt="" />
  <span>Dark mode</span>
</button>

【讨论】：