点击主题切换按钮时太阳图标无法切换为月亮图标怎么办

你的代码仅对月亮图标类fa-moon做了切换，没有同步移除/添加初始的太阳图标类fa-sun。点击后按钮元素会同时持有fa-sun、fa-moon两个互斥的Font Awesome图标类，样式冲突导致图标无法正常切换。主题色切换逻辑不依赖图标类名，因此运行正常。
注：你的菜单按钮也存在同类隐患，初始类为fa-bars，点击时仅切换fa-xmark未同步切换fa-bars，后续可能出现图标显示异常，本次修复一并处理。

原有HTML结构无需调整，替换JS逻辑即可：

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.nav-menu');

menu.onclick = () => {
  menu.classList.toggle('fa-bars');
  menu.classList.toggle('fa-xmark');
  navbar.classList.toggle('active');
};

let themeButton = document.getElementById('theme-button');

themeButton.onclick = () => {
  // 同步切换两个互斥的图标类
  themeButton.classList.toggle('fa-sun');
  themeButton.classList.toggle('fa-moon');

  document.body.classList.toggle('active', themeButton.classList.contains('fa-moon'));
};

• 页面初始加载时，按钮自带fa-solid fa-sun类，显示太阳图标，body无active类，默认亮色主题
• 点击主题按钮时，同时切换太阳、月亮两个图标类，保证元素上始终只有一个图标类生效
• 直接通过classList.toggle的第二参数绑定主题状态，简化if/else判断，逻辑更简洁

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