Dark Mode切换失效：复选框勾选后背景色未变更问题排查

你的CSS选择器#dark-mode:checked ~ #color-wrapper无法匹配到目标元素，核心问题在于通用兄弟选择器~只能选中当前元素之后的同级元素，而你的#color-wrapper在#dark-mode复选框的前面，所以无论复选框是否勾选，这条样式规则都不会生效。

有两种简单的修复方式：

方法1：调整HTML元素顺序 #

把复选框和标签移到#color-wrapper的前面，让兄弟选择器能正常匹配后续的目标元素：

<!doctype html>
<html>
<head>
</head>
<body>
  <input id="dark-mode" type="checkbox">
  <label for="dark-mode">Dark mode</label>

  <div id="color-wrapper">
    Hello world
  </div>
</body>
<style>
:root {
  --bg: pink;
}

#dark-mode:checked ~ #color-wrapper {
  --bg: orange;
}

#color-wrapper {
  background: var(--bg);
  padding: 10px;
}
</style>
</html>

方法2：使用:has()选择器（现代浏览器支持） #

如果不想调整HTML结构，可以用:has()选择器实现反向匹配（需Chrome 101+、Firefox 121+等现代浏览器支持）：

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="color-wrapper">
    Hello world
  </div>

  <input id="dark-mode" type="checkbox">
  <label for="dark-mode">Dark mode</label>
</body>
<style>
:root {
  --bg: pink;
}

body:has(#dark-mode:checked) #color-wrapper {
  --bg: orange;
}

#color-wrapper {
  background: var(--bg);
  padding: 10px;
}
</style>
</html>

若需兼容旧浏览器，也可以通过JavaScript监听复选框的change事件，动态修改#color-wrapper的背景色变量或样式。

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