:checked无法直接控制暗黑模式，因其仅能影响同级后续元素；纯CSS实现需将checkbox置于body开头并用~选择器切换body上的CSS变量，再由组件引用变量，但持久化、初始化和系统偏好同步仍需少量JS配合。
为什么:checked不能直接控制暗黑模式主题
:checked 只能作用于 <input type="checkbox"> 或 <input type="radio"> 元素自身及其后续兄弟元素（通过 ~ 或 +），它无法跨层级影响 <html> 或 <body> 的 class，更不能直接修改根级 CSS 变量。所以“纯 CSS 实现暗黑模式切换”必须依赖一个前提：把开关控件放在 DOM 顶层，并用兄弟选择器辐射全局样式。
必须把 <input> 放在 <html> 或 <body> 同级且靠前的位置
浏览器解析 CSS 时，~ 选择器只能选中**当前元素之后的同级元素**。因此，要让 :checked 影响整个页面，<input id="theme-toggle"> 必须放在 <body> 开始处（或 <html> 内最顶部），并且所有需要响应的主题样式都得写成它的后续兄弟选择器形式。
常见错误是把 checkbox 塞进 header 或 aside 里——那样它根本选不到 <main> 或 <footer>。
- ✅ 正确位置：
<html> <input type="checkbox" id="theme-toggle"> <body>...</body> </html>
- ❌ 错误位置：
<body> <header> <input type="checkbox" id="theme-toggle"> <!-- 这里失效 --> </header> <main></main> </body> - 实际项目中常改用
<body>作为容器，把<input>放在<body>开头，再用body > *或body > :not(input)配合#theme-toggle:checked ~ *控制后代
用 :checked ~ * + CSS 变量 统一接管颜色体系
不能靠 :checked ~ h1 { color: #333; } 逐个写死所有元素，否则维护爆炸。正确做法是定义两套 CSS 变量，在 :checked 触发时批量切换根变量值，再让所有组件用 var(--text-primary) 等引用。
立即学习“前端免费学习笔记（深入）”；
关键点在于：变量必须定义在 :root 或 body 上，且被 :checked 选择器覆盖；而 :root 不支持被 ~ 选中，所以变量得挂到 <body> 上。
- 把
<input id="theme-toggle">放在<body>最开头 - 用
#theme-toggle:checked ~ * { }无效（* 匹配太泛，性能差且不可控）；应改用#theme-toggle:checked ~ body { --bg: #121212; --text: #e0e0e0; } - 所有真实内容包裹在
<div id="app">或类似容器内，样式统一基于body上的变量：body { --bg: #ffffff; --text: #333333; } #theme-toggle:checked ~ body { --bg: #121212; --text: #e0e0e0; } #app { background-color: var(--bg); color: var(--text); } - 注意：Safari 对
:checked ~ body支持良好，但部分旧版 Chrome 要求body必须是<input>的**直接后续兄弟**，不能中间隔注释或空格文本节点
用户交互与可访问性绕不开的三个坑
纯 CSS 方案看似简洁，但忽略这些会立刻翻车：
-
<input>必须有id，且关联的<label>要用for属性绑定，否则屏幕阅读器无法识别用途 —— 别用<div onclick>模拟 - 切换后页面不会“记住状态”，刷新即回默认。CSS 本身无存储能力，必须配合
localStorage+ 少量 JS 设置初始checked状态，否则体验断裂 - 系统偏好（
@media (prefers-color-scheme: dark)）和用户手动切换冲突。建议用 JS 读取matchMedia结果，仅在用户未手动操作时才按系统设置checked，否则 CSS 无法判断“谁优先” - 深色模式图标（如太阳/月亮）需用
#theme-toggle:not(:checked) + label::before和#theme-toggle:checked + label::before分别定义，避免用 JS 切换 class
真正“纯 CSS”的切换只管视觉响应，持久化、初始化、系统同步这三件事，绕不开几行 JS —— 把它们当成必要胶水，而不是缺陷。
