必须把所有主题变量定义在:root里，因其是文档继承链的唯一根节点，确保var()在任意层级（含伪元素、SVG、contenteditable）正确取值；写在其他位置会导致继承断裂、组件不响应或闪屏。
必须把所有主题变量定义在 :root 里，否则 JS 修改后部分组件不响应、颜色断层、刷新闪白——这是最常被跳过的硬性前提。
为什么 :root 是唯一安全的声明位置
CSS 变量靠继承链传播，:root 等价于 html 元素，是整个文档树的根。只有挂在这里，var(--theme-bg) 才能在任意层级（包括 ::before、svg fill、button:disabled）正确取值。
- 写在
.theme-dark里：变量只在该 class 子树生效，document.documentElement.style.setProperty()完全无效 - 写在组件级选择器如
.header：兄弟组件读不到，且无法被全局切换逻辑控制 - 用
html[data-theme="dark"]替代.dark类：CSS 权重更稳（110 vs 10），避免和业务 class 冲突，Safari 兼容更好
setProperty 更新变量的正确姿势
不能用 cssText 或直接赋值 style 字符串，否则会清空已有内联样式，导致其他自定义属性丢失。
- ✅ 正确：
document.documentElement.style.setProperty('--bg-color', '#121212') - ❌ 错误：
document.documentElement.style.cssText = '--bg-color: #121212' - 批量更新建议封装：
function setTheme(vars) { Object.entries(vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v)); } - 必须确保变量已在
:root中预先声明，否则var(--x)会 fallback 到inherit或transparent，页面瞬间“失色”
用 HSL 变量替代 HEX 值，避免换肤时视觉跳变
直接替换 #4a90e2 → #1e3a5f 会导致按钮悬停、禁用态、文字灰度全部脱节。HSL 拆解才是可控路径。
- 把主色拆成
--primary-h、--primary-s、--primary-l三个变量，换肤时只调l（比如从57%→40%），h和s保持不变，色相与饱和度稳定 -
hsl()中使用var()要注意：分量变量定义时不带引号（--primary-s: 65%;✅，不是--primary-s: "65%";❌） - 用
calc()衍生状态色：color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%))（悬停变暗） -
transition不能写在变量名上（transition: --primary-color无效），要作用于具体属性：background-color: var(--bg-color); transition: background-color 0.3s ease;
如何让编辑器内容区、伪元素、SVG 等也响应主题
contenteditable 区域默认不继承 CSS 变量；::before/svg fill 等若未显式声明，也会丢失主题色。
- 给编辑器容器加 wrapper class 并显式绑定：
.editor-content { color: var(--editor-text); background-color: var(--editor-bg); } - 为伪元素单独声明：
.btn::after { background-color: var(--theme-accent); } - SVG 内联时需手动设置：
（注意：外部 SVG 文件不支持var()） - 提供 fallback：
border-color: var(--editor-border, #ddd);，避免变量未定义时样式崩塌
最容易被忽略的是：所有尺寸/圆角/间距变量也得在初始 CSS 中定义，否则切换时 layout 抖动；还有 prefers-color-scheme 只能作为初始化依据，不能替代用户手动切换 + localStorage 持久化闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
