网页暗黑/亮色模式切换异常：部分元素颜色未正常变更求助

问题现象 #

• 切换模式时，存放输入框的.input-container元素颜色无变化
• 输入框仅能切换至暗黑模式，无法切回亮色模式

核心问题与修复步骤 #

1. 赋值运算符错误（最关键）

SearchBarColor函数里多处误用比较运算符==代替赋值运算符=，导致.input-container背景色未被设置，输入框切回亮色时也失效：

// 错误写法
seek[idx].style.backgroundColor == "#1D1932";
// 正确写法
seek[idx].style.backgroundColor = "#1D1932";

2. HTML重复ID问题

页面存在两个<img id="mode">，ID必须唯一，会导致document.getElementById("mode")仅能获取第一个元素，切换图标无法正确更新，建议改为不同ID：

<!-- 桌面版 -->
<img src="./SVG/mode2.svg" onclick="ChangetoOpposite()" id="mode-desktop" />
<!-- 移动端 -->
<img src="./SVG/mode2.svg" onclick="ChangetoOpposite()" id="mode-mobile" />

3. 模式判断逻辑优化

直接依赖元素style.backgroundColor不可靠（若初始样式来自CSS类而非行内样式，style属性会为空），改用全局变量管理模式状态更稳定。

4. 补充屏幕宽度区间覆盖

原代码仅处理<=425px和>=1440px的情况，平板等中间宽度设备会失效，需补充覆盖逻辑。

修正后的完整代码 #

JavaScript 代码

// 全局变量记录当前模式，初始为亮色
let isDarkMode = false;

function SearchBarColor(isDark) {
  const seek = document.getElementsByClassName("input-container");
  const searchbar = document.getElementsByClassName("searchbar");
  // 根据屏幕宽度选择对应元素索引
  const idx = screen.width >= 1440 ? 0 : 1;
  
  if (isDark) {
    seek[idx].style.backgroundColor = "#1D1932";
    searchbar[idx].style.backgroundColor = "#1D1932";
  } else {
    seek[idx].style.backgroundColor = "white";
    searchbar[idx].style.backgroundColor = "white";
  }
}

function updateModeUI(isDark) {
  const menu = screen.width >= 1440 ? document.getElementById("menu") : document.getElementById("menu-mobile");
  const modeIcon = screen.width >= 1440 ? document.getElementById("mode-desktop") : document.getElementById("mode-mobile");
  
  menu.style.backgroundColor = isDark ? "#1d1932" : "white";
  document.body.style.backgroundColor = isDark ? "#131129" : "#F2F2F2";
  modeIcon.src = isDark ? "./SVG/mode.svg" : "./SVG/mode2.svg";
  SearchBarColor(isDark);
}

function ChangetoOpposite() {
  isDarkMode = !isDarkMode;
  updateModeUI(isDarkMode);
}

HTML 代码

<div class="content">
  <div class="wrapper">
    <div id="desktop-searchbar">
      <div class="input-container">
        <img class="icon" src="./SVG/Search.svg" />
        <input type="text" class="searchbar" placeholder="Search Here" />
      </div>
      <ul class="ul-bell-mode-avatar">
        <li>
          <img src="./SVG/mode2.svg" onclick="ChangetoOpposite()" id="mode-desktop" />
        </li>
        <li><img src="./SVG/bell.svg" id="bell" /></li>
        <li><img src="./img/avatar.png" /></li>
      </ul>
    </div>
    <div id="mobile-searchbar">
      <img src="./SVG/Logo.svg" />
      <div class="input-container">
        <img class="icon" src="./SVG/Search.svg" />
        <input type="text" class="searchbar" placeholder="Search Here" />
      </div>
      <ul class="ul-bell-mode-avatar">
        <li>
          <img src="./SVG/mode2.svg" onclick="ChangetoOpposite()" id="mode-mobile" />
        </li>
        <li><img src="./SVG/bell.svg" id="bell" /></li>
        <li><img src="./img/avatar.png" /></li>
      </ul>
    </div>
  </div>
</div>

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