自动适配系统深色模式时，深色模式切换按钮失效的解决咨询

嘿，这个问题我太熟了！核心问题出在你当前的代码逻辑和系统自动深色模式的适配没对齐——当系统通过媒体查询自动开启深色模式时，你的body上其实并没有添加dark-mode类，所以第一次点击按钮的时候，toggle是给body加上这个类，反而和媒体查询的样式重叠，看起来就像按钮没反应。

咱们直接上解决方案，分两步来改，保证完美解决：

第一步：重构CSS，让手动切换和系统自动适配无缝衔接 #

我建议用CSS变量来统一管理颜色，这样不管是系统自动触发还是手动切换，样式切换都会更顺滑，而且优先级也更好控制：

/* 浅色模式默认变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  /* 把你原来深色/浅色模式的样式都转成变量，比如边框色、链接色之类的 */
}

/* 系统自动检测深色模式时，切换变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

/* 手动切换的深色模式类，优先级高于媒体查询，确保手动操作能覆盖系统设置 */
:root.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

/* 全局样式使用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  /* 加上过渡动画，切换更丝滑 */
  transition: background-color 0.3s, color 0.3s;
}

/* 你原来的.dark-mode类可以删掉啦，用上面的变量方案更灵活 */

第二步：同步初始状态，让按钮逻辑和系统状态对齐 #

现在要修改JS，在页面加载时先检测系统的深色模式状态，给根元素加上对应的类，这样按钮的toggle逻辑从一开始就是对的：

// 页面加载完成后初始化状态
document.addEventListener('DOMContentLoaded', function() {
  const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const root = document.documentElement;
  // 如果系统是深色模式，给根元素加上dark-mode类
  if (isSystemDark) {
    root.classList.add('dark-mode');
  }
});

function dark_mode() {
  const root = document.documentElement;
  // 现在toggle就完全正常了——有类就移除（切浅色），没类就添加（切深色）
  root.classList.toggle("dark-mode");
}

额外优化：让按钮文本跟着状态变（可选但很贴心） #

要是想让用户体验更好，可以让按钮的文字跟着当前模式切换，比如深色模式时显示“切换到浅色模式”，反之亦然：

// 初始化+按钮文本同步
document.addEventListener('DOMContentLoaded', function() {
  const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const root = document.documentElement;
  const modeBtn = document.querySelector('#modeToggleBtn');
  
  if (isSystemDark) {
    root.classList.add('dark-mode');
    modeBtn.textContent = '切换到浅色模式';
  } else {
    modeBtn.textContent = '切换到深色模式';
  }
});

function dark_mode() {
  const root = document.documentElement;
  const modeBtn = document.querySelector('#modeToggleBtn');
  
  root.classList.toggle("dark-mode");
  
  // 切换按钮文本
  if (root.classList.contains('dark-mode')) {
    modeBtn.textContent = '切换到浅色模式';
  } else {
    modeBtn.textContent = '切换到深色模式';
  }
}

对应的HTML按钮要加个ID：

<button id="modeToggleBtn" onclick="dark_mode()">切换到深色模式</button>

这样改完之后，不管页面一开始是系统自动的深色还是浅色，按钮都能精准切换模式，再也不会出现点击没反应的情况啦！

备注：内容来源于stack exchange，提问作者user29519291