用 :root 声明 CSS 变量最稳妥，因其全局可继承且支持 JS 动态修改；需避免 !important 覆盖、确保修改作用于 :root、结合 prefers-color-scheme 媒体查询适配深色模式；变量名须全小写加连字符，JS 中用 getPropertyValue() 读取。
页脚版权色不随主题切换？用 :root 声明 CSS 变量最稳妥
直接在 :root 里定义颜色变量，比在某个局部选择器里设 --footer-color 更可靠。因为 :root 是全局作用域，所有组件、嵌套层级都能继承，且便于后续 JS 动态修改（比如夜间模式开关）。别写成 body { --footer-color: #666; }——body 下的子元素能读到，但伪元素、shadow DOM 或某些框架的 scoped 样式可能失效。
示例：
:root {
--footer-color: #666;
}
footer .copyright {
color: var(--footer-color);
}
JS 修改变量后页脚没变色？检查是否漏了 !important 或覆盖规则
CSS 变量本身不带优先级，var(--footer-color) 的最终颜色取决于它所在声明块的权重。如果页脚样式里有类似 footer .copyright { color: #333 !important; }，那变量再怎么改都无效。
- 删掉所有针对
color的!important，让var()正常参与层叠 - 确认 JS 修改的是
:root，不是某个 class 或 id 选择器：document.documentElement.style.setProperty('--footer-color', '#999'); - 避免在媒体查询或组件 scoped style 中重复定义同名变量，否则会局部覆盖
深色模式下版权文字发灰看不清？用 prefers-color-scheme 自动适配
光靠 JS 切换不够鲁棒，系统级偏好应由 CSS 原生响应。把变量值放进媒体查询里，比监听 matchMedia 更轻量、更及时。
立即学习“前端免费学习笔记（深入）”；
示例：
:root {
--footer-color: #666;
}
@media (prefers-color-scheme: dark) {
:root {
--footer-color: #aaa;
}
}
footer .copyright {
color: var(--footer-color);
}
注意：不要写成 @media (prefers-color-scheme: dark) { footer .copyright { color: #aaa; } }——这样就绕过变量了，失去统一控制能力。
变量名带连字符但 JS 里读不到？驼峰命名和连字符要严格对应
CSS 变量名是区分大小写的，且连字符 - 在 JS 中不能作为属性名直接访问。比如 --footer-text-color，在 JS 中必须写成 getComputedStyle(document.documentElement).getPropertyValue('--footer-text-color')，不能写成 style['--footer-text-color']（除非你先 setProperty 过）。
- 变量名建议全小写 + 连字符，如
--footer-color，别用--footerColor - 读取时用
getPropertyValue()，写入时用setProperty() - 调试时可打印
getComputedStyle(document.documentElement)查看实际生效值
变量不是魔法，它只是 CSS 层的“占位符”，真正起效靠的是浏览器对 var() 的实时解析——所以任何阻断解析链的操作（比如 display: none 的父容器、scoped style 隔离、CSS-in-JS 的插入时机）都会让它看起来“失灵”。
