html根元素必须承载主题状态，即document.documentelement（）是唯一能全局继承css变量的锚点；若将主题class加在上，:root变量仍按默认值计算，后代无法读取新值，导致主题切换失效。
HTML根元素必须承载主题状态
动态主题切换不是“换CSS文件”这么简单，关键在于谁来承载主题标识——document.documentElement（即）是唯一能被所有后代元素继承CSS变量的锚点。如果把主题class加在上，:root里定义的变量仍按默认值计算，后代元素读不到新值。
- ✅ 正确做法：用
document.documentElement.classList.toggle('theme-dark')或document.documentElement.setAttribute('data-theme', 'dark') - ❌ 错误做法：只改
document.body.className，除非你把变量定义在body选择器下（但这样破坏继承链，不推荐） - 注意
[data-theme="dark"]这类属性选择器必须作用于，否则var(--bg)取不到覆盖值
为什么里的内联脚本顺序不能错
页面渲染前就该确定主题，否则会闪屏（FOUC）。常见错误是等DOMContentLoaded再读localStorage，此时样式已按默认主题渲染完毕，再切主题就会明显闪烁。
- ✅ 正确写法：在
里放一段<script></script>，立即执行document.documentElement.classList.add(...) - ❌ 错误写法：把主题加载逻辑放在
底部或用addEventListener('DOMContentLoaded', ...) - 补充：
prefers-color-scheme检测也得同步做，比如if (!localStorage.getItem('theme')) { const dark = window.matchMedia('(prefers-color-scheme: dark)').matches; ... }
主题切换时图片资源怎么跟着变
CSS变量不能直接控制<img src>，但可以间接驱动。硬编码路径或靠JS切换src容易漏改、难维护，更可靠的是用CSS背景图 + 变量控制background-image。
- ✅ 推荐方式：把图片转为CSS背景，用
--hero-bg-url: url('/img/light-hero.jpg');定义，再用.hero { background-image: var(--hero-bg-url); } - ❌ 避免方式：在JS里根据主题拼接
img.src = theme === 'dark' ? '/img/dark-logo.png' : '/img/light-logo.png';——组件多时极易遗漏 - 注意：SVG内联图标可用
fill: var(--icon-color)，比换图更轻量
多主题下CSS层叠权重陷阱
变量设对了，颜色却没变？大概率是其他CSS规则用硬编码值盖掉了var()。CSS变量本身不提升优先级，它只是“值的占位符”。
- ✅ 检查手段：打开开发者工具，选中元素 → 看Computed面板里
color的最终值来源，确认是否来自var(--text-color) - ❌ 常见冲突：写了个
.card:hover { color: #222; }，它比.card { color: var(--text-color); }权重高，hover时变量失效 - 解决思路：统一用变量写所有状态，比如
.card:hover { color: var(--text-color-hover); }，别混用硬编码
setProperty有没有执行成功。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
