必须将data-theme设在document.documentelement（即标签）上，因为css变量继承、:root作用域、伪元素样式及第三方库主题注入均依赖根节点；设在上会导致选择器不匹配、变量不重计算、首屏闪动及暗色失效。
必须把 data-theme 属性设在 document.documentElement（即 标签）上，其他位置都会失效——不是“不好用”，是根本不会触发 CSS 变量重计算、伪元素变色、第三方库主题注入。
为什么不能把 data-theme 加在
浏览器的 CSS 变量继承、:root 作用域、伪元素（如 input::-webkit-inner-spin-button）、滚动条样式，全部依赖 这个根节点。把 data-theme="dark" 加到 上，html[data-theme="dark"] :root 这类选择器压根不匹配，变量不会切换，页面看起来毫无变化。
常见翻车现场：
- 用了 Tailwind 或 Bootstrap，但
dark:前缀不生效 —— 因为它们内部也依赖html[data-theme="dark"]或html.dark -
input的光标颜色、原生下拉箭头、textarea滚动条还是亮色 —— 它们只响应根元素上的属性或 class - 服务端渲染（SSR）时首屏闪白/闪黑 ——
上的属性无法被 SSR 直出，客户端 JS 补上时已晚
document.documentElement.dataset.theme 怎么设才不踩坑
初始化和切换都必须操作 document.documentElement，且写法有严格要求：
- 设暗色：
document.documentElement.dataset.theme = "dark"（字符串，不是布尔值） - 设亮色：
document.documentElement.dataset.theme = "light" - 清空（比如 fallback 到系统偏好）：
delete document.documentElement.dataset.theme—— 别设成""或"light"，因为[data-theme=""]不会匹配空属性，CSS 规则失效 - 别用
setAttribute：它不会自动转驼峰，dataset.theme是标准、语义清晰、兼容性更好
示例初始化脚本（必须放在所有 <link rel="stylesheet"> 之前）：
const saved = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (systemPrefersDark ? 'dark' : 'light');
CSS 中怎么写才能压过 @media (prefers-color-scheme: dark)
媒体查询优先级低于属性选择器，所以不能只靠 @media 覆盖；必须用 html[data-theme="dark"] :root 显式重定义变量：
- 基础变量写在
:root里（默认亮色） - 暗色变量必须写成
html[data-theme="dark"] :root { --bg: #1e1e1e; --text: #e0e0e0; }—— 漏掉html前缀，权重不够，会被子元素样式覆盖 - 别只写暗色版：如果用户切回亮色，而你没定义
html[data-theme="light"] :root，变量就 fallback 到初始值，但可能和设计稿不一致 - 所有可变色元素（文字、背景、边框、阴影）都得用
var(--xxx)，否则切换后照样不变
别忘了同步更新 <meta name="color-scheme">
这个 meta 标签控制浏览器 UI（地址栏、表单控件、滚动条等）的颜色，但它不会随 JS 自动更新：
- 首次加载时，也要根据
saved或系统偏好设置：document.querySelector('meta[name="color-scheme"]').content = "light dark" - 每次切换主题后，必须手动同步：
document.querySelector('meta[name="color-scheme"]').content = theme === "dark" ? "light dark" : "light dark"（注意：两个模式都支持时 content 就是"light dark"，不是按当前模式动态改） - Chrome 93+ 和 Safari 都支持，旧版忽略也不报错，但不设就会导致夜间模式下输入框边框还是浅灰、地址栏仍是白色
最易被忽略的点：CSS 变量只管你写的样式，不管图片、SVG 内联色、Canvas 绘图、background-image —— 这些必须靠 DOM 层级切换（比如换 <img src> 或用 <picture></picture>）或 JS 重绘，data-theme 本身对它们完全无感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
