纯css主题切换需将checkbox置于body顶层，用body.dark等类配合:root变量重定义实现；因:root无法被:checked修饰且css选择器无法全局广播状态，实际项目推荐js切换class+css层叠方案。
如何用 checkbox 触发 CSS 变量切换
纯 CSS 实现主题色切换，核心是把 checkbox 的 :checked 状态当作开关信号，再用它影响根级 :root 中的自定义属性。关键不是“控制 JS”，而是利用选择器层级穿透能力——input[type="checkbox"] 和后续元素必须在同一 DOM 层级或可被相邻/后代选择器捕获。
常见错误是把 checkbox 放在 body 深层，又试图用 :root:checked 这种写法，这根本无效——:root 是 html 元素，它不可能被 :checked 修饰。
- 把
checkbox放在顶层（如紧贴开始处），并加id="theme-toggle" - 用
body:has(#theme-toggle:checked)或更兼容的body.theme-dark配合 JS 切换类（推荐后者，兼容性更好） - 若坚持纯 CSS，需用
#theme-toggle:checked ~ .content这类兄弟选择器控制下游样式，但无法全局改:root变量——所以实际项目中几乎都配合少量 JS
:root 变量如何响应主题切换
CSS 变量本身不响应状态变化，但它的值可以被不同选择器覆盖。真正起作用的是：同一变量在不同上下文（如 body.light 和 body.dark）下被重复声明，浏览器按层叠规则取当前匹配的值。
不要写 :root { --primary: #007bff; } body.dark :root { --primary: #0056b3; }——这种写法无效，因为 :root 不受 body 类影响。
- 正确写法是：
:root { --primary: #007bff; } body.dark { --primary: #0056b3; } - 所有用到颜色的地方统一写
color: var(--primary); background: var(--bg-surface); - 变量名建议带语义前缀，如
--text-primary、--bg-surface，避免直接用--blue-500这类命名，否则换主题时要全局搜替换
为什么不能只靠 :checked + label 控制整个页面
:checked + label 只能影响紧邻的下一个兄弟元素，且无法跨父容器。比如你希望切换后让导航栏、卡片、按钮同时变色，但它们分散在不同组件里，纯 CSS 选择器无法从一个 checkbox “广播”状态到任意位置。
典型翻车场景：header 在 body 开头，main 在中间，footer 在末尾——你没法用一个 input 同时控制三者，除非它们全是它的后续兄弟，而这违背 HTML 结构逻辑。
- 可行折中：把
checkbox放最顶部，用body:has(#theme-toggle:checked)（Chrome 105+ / Safari 15.4+ 支持），但 Firefox 当前不支持:has()在:root或body上 - 更稳方案：用一行 JS 监听
change事件，切换document.body.classList.toggle('dark')，然后靠 CSS 层叠生效 - 别忘了加
prefers-color-scheme媒体查询兜底：@media (prefers-color-scheme: dark) { body:not(.light) { --bg-base: #121212; } }
Checkbox 样式重置与可访问性要点
默认 checkbox 不能直接当开关按钮用，视觉上要隐藏原生控件，用 label 承载点击区域和图标，同时保留语义和键盘导航能力。
- 必须保留
<input type="checkbox" id="theme-toggle"><label for="theme-toggle">?</label>结构，否则屏幕阅读器无法识别 - 隐藏原生控件用
position: absolute; opacity: 0; width: 1px; height: 1px;，别用display: none或visibility: hidden，否则失去可访问性 - 用
label::before绘制滑块轨道，input:checked + label::after控制滑块位置，动画用transform而非left，保证性能 - 记得加
user-select: none防止双击选中文本，iOS 上还要加-webkit-tap-highlight-color: transparent
最易被忽略的一点：CSS 变量的 fallback 值不是摆设。比如写 color: var(--text-primary, #333);，当变量未定义或为空时会回退，但如果你在 body.dark 里漏写了某个变量，它就会沿用 light 主题的值，导致局部颜色错乱——建议用工具（如 VS Code 插件）检查所有变量是否成对出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
