css变量换肤核心是通过:root定义全局自定义属性，配合属性选择器（如[data-theme="dark"] :root）覆盖变量值，利用css层叠与继承实现自动重绘；必须统一引用var()、禁用硬编码，并为所有变量提供fallback。
什么是CSS变量换肤的核心机制
CSS变量（:root 中定义的 --color-primary 这类自定义属性）本质是级联作用域内的动态值，浏览器会实时响应其变化并重绘依赖它的样式。换肤不需JS操作DOM类名或内联样式，只需修改 :root 上的变量值，所有用 var(--color-primary) 的地方自动更新。
关键前提是：变量必须在 :root 声明，且所有主题色、间距、阴影等可变样式都通过 var() 引用——不能混用硬编码值。
如何用纯CSS实现多主题切换（无JS）
利用 :checked + ~ 或 + 选择器联动隐藏单选按钮与主题容器，通过伪类控制 :root 变量值。实际生效靠的是「属性选择器匹配」而非直接改写变量。
- 把每个主题对应的颜色集写成独立的
[data-theme="dark"] :root规则块，而不是试图用JS赋值document.documentElement.style.setProperty() - 用
<input type="radio">控制状态，配合label触发，避免JS监听 - 必须将主题样式写在
:root之后（如[data-theme="dark"] :root），否则层叠优先级不够，变量不会被覆盖
示例结构：
<input type="radio" name="theme" id="theme-light" checked><input type="radio" name="theme" id="theme-dark"><label for="theme-light">亮色</label>
<label for="theme-dark">暗色</label>
[data-theme="light"] :root {
--bg: #fff;
--text: #333;
}
[data-theme="dark"] :root {
--bg: #1a1a1a;
--text: #eee;
}
body { background-color: var(--bg); color: var(--text); }
为什么直接改 style.setProperty() 不算“无需JS”
标题强调“无需JavaScript”，但很多人误以为用一行JS改变量就是纯CSS方案。其实只要执行了 element.style.setProperty()，就已引入JS运行时依赖，失去离线可用、SEO友好、首屏零JS等优势。
-
style.setProperty()修改的是元素的style属性，优先级高于:root，容易和CSS文件中的变量定义冲突 - 服务端渲染（SSR）或静态站点生成时，JS尚未执行，用户首屏看到的是默认主题，存在闪屏
- 无法被CSS媒体查询或 prefers-color-scheme 自动接管，丧失系统级适配能力
暗色模式兼容与 fallback 处理
用户系统开启 prefers-color-scheme: dark 时，应默认启用暗色主题，但允许手动覆盖。这需要组合使用 @media 和属性选择器。
- 在未指定
data-theme时，用@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }设定初始值 - 一旦用户手动选择主题（如点击暗色按钮），给
加上data-theme="dark"，此时[data-theme="dark"] :root规则会覆盖媒体查询结果 - 所有
var(--color, #000)必须带 fallback，否则变量未定义时会渲染为透明或继承值，导致文字消失等意外
fallback不是可选项——它是变量未生效时的保底，尤其在CSS加载顺序错乱或属性选择器未匹配时立刻暴露问题。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
