技术请求：将双模式切换按钮改为单个夜间模式切换按钮

咱们可以通过以下几个关键修改，把原来的两个独立按钮改成单个切换按钮，同时移除亮色模式按钮：

1. 修改HTML结构 #

首先移除原来的LightMode按钮，只保留一个用于切换模式的按钮，给它设置新的ID和通用类名：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="modeToggle" class="modebtn">切换到夜间模式</button>
<h1>Dark Mode is better than Day Light Mode</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="doubleSection">
  <p class="firstParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>
  <p class="secondParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure soluta nihil recusandae distinctio, molestias eius provident dicta? Culpa aliquid velit pariatur repellat dolorem. Dolorem iure, magni expedita quis ex.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer> @Free to use </footer>

2. 调整CSS样式 #

给切换按钮添加通用样式，并让按钮在不同模式下自动适配外观，同时给body设置默认亮色样式：

body {
  padding: 50px;
  /* 设置默认亮色模式样式，避免初始状态无样式 */
  background-color: white;
  color: black;
}
footer {
  text-align: center;
  background-color: green;
  padding: 20px 0;
}
.nightMode {
  background-color: black;
  color: white;
}
.LightMode {
  background-color: white;
  color: black;
}
/* 切换按钮基础样式 */
.modebtn {
  padding: 10px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
/* 夜间模式下的按钮样式 */
body.nightMode .modebtn {
  background-color: yellow;
  color: black;
}
/* 亮色模式下的按钮样式 */
body:not(.nightMode) .modebtn {
  background-color: black;
  color: white;
}
.firstParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}
.secondParagraph {
  width: 50%;
  padding: 20px;
  border: 1px solid gold;
}
.doubleSection {
  display: flex;
}

3. 重写JavaScript逻辑 #

监听单个按钮的点击事件，通过判断当前body的类来切换模式，同时更新按钮文本提示用户当前可切换的模式：

$(document).ready(function() {
  $('#modeToggle').click(function() {
    const $body = $('body');
    const $toggleBtn = $(this);
    
    // 判断当前是否处于夜间模式
    if ($body.hasClass('nightMode')) {
      // 切换到亮色模式
      $body.removeClass('nightMode').addClass('LightMode');
      $toggleBtn.text('切换到夜间模式');
    } else {
      // 切换到夜间模式
      $body.removeClass('LightMode').addClass('nightMode');
      $toggleBtn.text('切换到亮色模式');
    }
  });
});

核心修改说明 #

• 移除了原有的LightMode按钮，统一使用单个modeToggle按钮完成双向切换
• JS逻辑通过判断body的类名来决定切换方向，同时更新按钮文本，让用户清晰知道切换目标
• CSS通过父类选择器，让按钮在不同模式下自动适配样式，保持视觉一致性
• 给body设置默认亮色样式，确保页面初始加载时的显示正常

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