checked表单属性与CSS变量实现换肤原理

先聊一个有意思的现象：不需要编写任何 JavaScript，仅靠一个 :checked 伪类，就能驱动整个主题切换系统。听起来很神奇，但原理其实并不复杂——核心在于，:checked 是浏览器原生状态的实时镜像，而不是 JS 模拟出来的开关。

用户点击 ，或者用键盘空格键选中它，状态更新的那一刻，CSS 重绘就同步触发了。只要在样式规则里写好了 :checked + :root 或 :checked ~ [data-theme] 这样的选择器链路，CSS 变量覆盖就在同一帧内完成。不需要 MutationObserver，也不需要手动调用 setProperty。

:checked 为什么能触发换肤，而不是靠 JS 监听？

常见的一个误解，是试图给 或 加上 :checked，但实际上它只对 radio 和 checkbox 生效。还有一个更隐蔽的坑：radio 如果没有设置 name 属性，浏览器就不认为它们属于同一组，导致多个主题同时处于激活状态。

实现主题切换，有几个硬性要求必须遵循：

• 必须用 ，不能用 checkbox。换肤天然是单选行为，checkbox 的状态不会自动互斥
• name 属性值必须一致，比如 name="theme"，让浏览器把它们识别为同一组
• radio 必须真实存在于 DOM 中且可交互，不能用 display: none 隐藏。推荐用 position: absolute; left: -999px; 移出可视区
• 样式规则里的 :checked 必须能够通过 ~ 找到目标节点。比如 input#dark:checked ~ :root 这种写法，就需要 :root 是 radio 的后续兄弟元素——实际上，通常我们会借助 body 或一个外层容器来完成这个联动

如何让 :checked 修改 :root 变量而不依赖 JS？

纯 CSS 做不到直接写 document.documentElement.style.setProperty()，但可以通过属性选择器间接实现覆盖。思路是把不同主题的变量拆成独立的 [data-theme="dark"] :root 规则块，然后用 :checked 控制 body 或根容器的 data-theme 属性值。

关键点在于，整个过程的实质不是“JS 改变量”，而是“JS 切换 class 或 data 属性”，:checked 只负责联动这个动作。真正生效的是 CSS 的层叠优先级——[data-theme="dark"] :root 的权重高于普通 :root，变量自然被覆盖掉。

• 不要在 :root 里写多套变量，CSS 不支持条件分支，全部生效会导致变量冲突
• 主题样式必须写在默认 :root 规则之后，否则层叠顺序不对，变量不会被替换
• 推荐的结构： + 深色 +
  ，然后用 input#theme-dark:checked ~ .theme-applier 设置 data-theme="dark"
• 如果用 body[data-theme] 做控制，要确保所有 var(--color-bg) 的引用都在其子元素内，否则继承链会断开

为什么 var(--xxx) 能自动响应 :checked 触发的变量变更？

CSS 变量本质上是级联作用域内的动态值，浏览器渲染引擎每次计算样式时，都会重新从 :root 上读取当前值。只要变量定义的位置没有变（始终在 :root 或更高层选择器下），引用方式统一用 var(--xxx)，就不需要 JS 去强制重绘或遍历元素。

这里有一个很容易忽视的硬伤：混用硬编码值。比如某处写了 color: #333，另一处用了 color: var(--text-color)，换肤时前者完全不动，视觉上就会出现错乱。

• 所有颜色、间距、阴影、字体大小等可变样式，必须 100% 通过 var(--xxx) 引用，不能有例外
• 每个 var() 最好带上 fallback，比如 color: var(--text-color, #000);，避免变量未定义时样式崩塌
• Shadow DOM 内部需要显式透传变量，用 :host { --color-primary: var(--color-primary); } 的方式把外层变量传进来
• 变量名拼写必须严格一致，--primary-color 和 --primaryColor 是两个不同的变量

移动端和无障碍场景下 :checked 换肤要注意什么？

移动端的点击区域小、焦点管理比较弱，:checked 的效果容易被干扰。屏幕阅读器依赖语义结构，如果隐藏 radio 时处理不当，换肤控件就会变得不可访问。

真实项目里最常见的坑，并不是逻辑写错了，而是 label 的关联失效，或者 focus 样式缺失——用户点击了没反应，或者键盘 Tab 根本进不去。

• 必须用 for 显式绑定 radio 的 id，不能仅靠包裹结构，否则 Safari 移动端可能不识别
• 给 label 加 padding 或 min-height 来扩大点击区域，至少做到 44×44px，符合 WCAG 规范
• 保留 :focus-visible 样式，让用户知道当前焦点在哪个控件上，别用 outline: none 一刀切
• 不要用 pointer-events: none 或 user-select: none 去拦截 radio 的父容器，这样做会阻断原生的状态更新

坦率地说，:checked 是一种被动响应的机制，它不保证“用户一定能看到变化”。如果变量引用漏了、fallback 写错了，或者 DOM 结构导致选择器链路断开，整个换肤链就会静默失败，连个报错都不会有。所以实现之后，务必拿真机测一轮，特别是移动端 Safari 和键盘导航场景。