为何JavaScript实现的深色模式功能失效？按钮样式未按预期切换

AI 小北

2026-9-25

实现方案优化

你的原有逻辑是可行的，我们可以做精简优化，避免冗余代码，同时保证效果完全符合需求：默认状态按钮为深色，开启深色模式后按钮自动切换为浅色。

优化后HTML代码

<button onclick="toggleDarkMode()" class="mode-toggle-btn" id="mode-toggle">深色模式</button>
<!-- 如果要保留原有调用逻辑，把函数名改回myFunction即可 -->

优化后CSS代码

/* 按钮公共样式，抽离重复属性，后期维护更方便 */
.mode-toggle-btn {
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: bold;
  position: fixed;
  transition: all 0.3s ease; /* 可选：添加过渡效果，切换更丝滑 */
}
/* 默认状态：浅色模式下按钮为深色 */
.mode-toggle-btn {
  background-color: #36393F;
  color: #fff;
}
.mode-toggle-btn:hover {
  background-color: #32353B;
  color: #ccc;
}
/* 开启深色模式后按钮变为浅色 */
.mode-toggle-btn.dark-active {
  background-color: #fff;
  color: #36393F;
}
.mode-toggle-btn.dark-active:hover {
  color: #666;
}
/* 页面深色模式样式 */
.dark-mode {
  background-color: #36393F !important;
  color: #fff !important;
}

优化后JS代码

const toggleButton = document.getElementById('mode-toggle')
let isDarkMode = false;

function toggleDarkMode() {
  isDarkMode = !isDarkMode;
  // 切换页面深色模式
  document.querySelectorAll('div.scrollseite,div.scrollseite2').forEach(el => el.classList.toggle('dark-mode'))
  // 切换按钮样式
  toggleButton.classList.toggle('dark-active')
  // 切换按钮文字
  toggleButton.innerText = isDarkMode ? '浅色模式' : '深色模式'
}