点击SVG切换明暗模式时，如何替换对应的SVG图标？

方案一：JS动态替换SVG内容 #

适合需要动态生成图标的场景，直接修改DOM内容切换图标：

HTML

<!-- 给SVG加容器，方便后续替换内容 -->
<div id="theme-switcher">
  <svg onclick="toggleTheme()" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    </path>
  </svg>
</div>

JavaScript

function toggleTheme() {
  const body = document.body;
  const switcher = document.getElementById('theme-switcher');
  
  // 切换暗模式类
  body.classList.toggle('dark-mode');
  
  // 根据当前主题切换图标及颜色
  if (body.classList.contains('dark-mode')) {
    // 替换为月亮SVG，适配暗背景调整为白色
    switcher.innerHTML = `
      <svg onclick="toggleTheme()" width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
        <path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        </path>
      </svg>
    `;
  } else {
    // 换回太阳SVG，恢复黑色
    switcher.innerHTML = `
      <svg onclick="toggleTheme()" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        </path>
      </svg>
    `;
  }
}

CSS

.dark-mode {
  background-color: #333;
}

#theme-switcher svg {
  cursor: pointer; /* 提示可点击 */
}

/* 可选：暗模式下页面文本变白，提升可读性 */
.dark-mode *:not(svg) {
  color: #fff;
}

方案二：CSS控制图标显隐（推荐） #

无需JS修改DOM，仅通过切换类控制图标显示/隐藏，代码更简洁易维护：

HTML

<!-- 容器包裹两个SVG，点击容器触发切换 -->
<div id="theme-switcher" onclick="toggleTheme()">
  <!-- 太阳图标：默认显示 -->
  <svg class="icon sun" width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    </path>
  </svg>
  <!-- 月亮图标：默认隐藏 -->
  <svg class="icon moon" width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
    <path d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
    </path>
  </svg>
</div>

JavaScript

function toggleTheme() {
  // 仅切换body的dark-mode类，其余交给CSS处理
  document.body.classList.toggle('dark-mode');
}

CSS

#theme-switcher {
  cursor: pointer;
  display: inline-block; /* 避免容器占满整行 */
}

/* 默认隐藏月亮图标 */
.icon.moon {
  display: none;
}

/* 暗模式基础样式 */
.dark-mode {
  background-color: #333;
}

/* 暗模式下切换图标显示状态 */
.dark-mode .icon.sun {
  display: none;
}
.dark-mode .icon.moon {
  display: block;
}

/* 可选：暗模式下文本变白 */
.dark-mode *:not(svg) {
  color: #fff;
}

方案对比 #

方案二更推荐，原因：

• 逻辑极简，JS只负责切换类，无需处理复杂HTML字符串；
• 维护成本低，修改图标样式直接调整CSS或SVG即可；
• 性能更优，减少DOM操作次数。

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