切换暗黑模式时实现图片切换的技术求助

核心问题 #

• 原CSS未正确关联主题切换的dark类，暗黑Logo默认显示逻辑错误
• 自定义的setLogo、logoSwap函数未被调用，且存在逻辑错误（如未定义DARK_LOGO、将图片路径作为类名添加到body的错误操作）

修正实现 #

1. 调整CSS代码 #

通过body的dark类控制Logo显示/隐藏，无需额外JS操作图片：

.logo {
  display: flex;
  flex-wrap: wrap;
  width: 80px;
  height: auto;
}

.light-theme-logo {
  display: block;
  width: 100%;
}

.dark-theme-logo {
  display: none; /* 默认隐藏暗黑模式Logo */
}

/* 暗黑模式下切换Logo显示 */
body.dark .light-theme-logo {
  display: none;
}

body.dark .dark-theme-logo {
  display: block;
  width: 100%;
}

2. 简化JavaScript代码 #

删除无效函数，保留原有主题切换逻辑即可：

const MOON = '🌙';
const SUN = '☀️';
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = LIGHT_MODE;

const btn = document.querySelector('#theme-switcher');

init();

function init() {
  let storedMode = sessionStorage.getItem('mode');
  if (!storedMode) {
    storedMode = DEFAULT_MODE;
    sessionStorage.setItem('mode', DEFAULT_MODE);
  }
  setMode(storedMode);
}

function setMode(mode = DEFAULT_MODE) {
  if (mode === DARK_MODE) {
    btn.textContent = SUN;
    document.body.classList.add(DARK_MODE);
  } else if (mode === LIGHT_MODE) {
    btn.textContent = MOON;
    document.body.classList.remove(DARK_MODE);
  }
}

btn.addEventListener('click', function() {
  let mode = sessionStorage.getItem('mode');
  if (mode) {
    let newMode = mode === DARK_MODE ? LIGHT_MODE : DARK_MODE;
    setMode(newMode);
    sessionStorage.setItem('mode', newMode);
  }
})

3. 优化HTML（可选） #

移除行内样式，统一由CSS控制：

<div class="title">
  <div class="logo">
    <a id="logo-home" href="index.html">
      <img src="/Public/Images/light-image.png" class="light-theme-logo">
      <img src="/Public/Images/dark-image.png" class="dark-theme-logo">
    </a>
  </div>
</div>

原理说明 #

通过CSS类选择器联动body的dark状态，自动切换两个Logo的显示/隐藏状态，避免了JS直接操作DOM元素的冗余逻辑，同时保证主题切换逻辑的统一性。

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