HTML网站暗模式切换按钮如何实现月亮与太阳图标动态切换

解决方案 #

你可以通过同步切换按钮图标的src属性实现需求，具体修改如下：

1. 调整HTML代码

给按钮内的图标元素添加唯一ID方便选中，同时修正img标签的错误写法，且不要给这个图标加inverted类，避免它参与全局反色逻辑：

<button class="btn">
  <img id="modeIcon" src="moon.png" alt="明暗模式切换">
</button>

2. 修改JS代码

在明暗模式切换逻辑后，判断当前模式状态，同步修改图标路径：

function myfunction(e) {
  console.log("you clicked");
  // toggle方法返回切换后是否存在该类，直接用来判断当前模式
  const isDarkMode = document.documentElement.classList.toggle("dark-mode");
  document.querySelectorAll(".inverted").forEach((result) => {
    result.classList.toggle("invert");
  });
  // 切换对应图标
  const modeIcon = document.getElementById('modeIcon');
  modeIcon.src = isDarkMode ? 'sun.png' : 'moon.png';
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);

请将代码中的sun.png替换为你实际的太阳图标文件路径

可选优化：初始状态适配

如果你的网站支持记忆用户历史选择的明暗模式、或者默认开启暗模式，可以补充页面初始化逻辑，保证图标和初始模式匹配：

// 页面加载完成后初始化图标状态
window.addEventListener('load', () => {
  const isDarkMode = document.documentElement.classList.contains('dark-mode');
  const modeIcon = document.getElementById('modeIcon');
  modeIcon.src = isDarkMode ? 'sun.png' : 'moon.png';
})

内容的提问来源于stack exchange，提问作者Khushhal