仅靠@media (prefers-color-scheme: dark)不够，必须配合<meta name="color-scheme" content="light dark">声明支持，否则原生控件不自动变色、首屏闪白、用户手动切换无法覆盖系统设置。
直接用 @media (prefers-color-scheme: dark) 重设 :root 中的变量就能生效，但必须配合 <meta name="color-scheme" content="light dark"> 声明支持，否则原生控件（如 <input>）不会自动变色。
为什么只写媒体查询还不够
仅靠 CSS 媒体查询能响应系统偏好，但有三个现实问题：浏览器原生控件不自动适配、页面首次加载时可能闪白、用户手动切换主题后无法覆盖系统设置。
-
<meta name="color-scheme" content="light dark">必须加在<head>里——它不是可选提示，而是告诉浏览器“我支持这两套模式”，触发原生控件样式自动切换 - 媒体查询本身不修改 DOM，所以 JS 无法监听或干预；若用户点了“深色开关”，得靠
localStorage+dataset.theme主动接管，不能只依赖prefers-color-scheme - 未声明
color-scheme时，Safari 和部分安卓 WebView 会忽略@media (prefers-color-scheme)，导致深色模式完全不触发
:root 变量必须在媒体查询外先定义默认值
所有变量都要在 @media 外的 :root 中显式声明，哪怕浅色模式下用不到深色值——否则 var(--bg-color) 在深色块里 fallback 到 transparent 或继承色，页面瞬间“失色”。
- 错误写法：
@media (prefers-color-scheme: dark) { :root { --bg-color: #121212; } }—— 浅色模式下--bg-color根本没定义，var(--bg-color)无效 - 正确结构：先写
:root { --bg-color: #ffffff; --text-color: #333; }，再用@media覆盖同名变量 - 变量名建议带语义前缀，如
--theme-bg而非--bg，避免和第三方库冲突
transition 不作用于变量名，只作用于具体属性
transition: --theme-bg 是无效语法，浏览器不识别变量名作为可动画属性。过渡必须绑定到 background-color、color 这类原生属性上。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
body { background-color: var(--theme-bg); transition: background-color 0.3s ease; } - 变量更新后，浏览器重新计算
background-color的值，才触发已有 transition - HEX 值之间插值可能跳变，推荐统一用
hsl()表示主色，比如--theme-primary: hsl(210, 70%, 50%)，换肤时只调l（亮度），过渡更自然
matchMedia 监听必须手动触发重绘
window.matchMedia('(prefers-color-scheme: dark)') 的 change 事件只通知系统切换，不会自动更新页面——CSS 变量已由媒体查询接管，但 JS 层若需同步状态（比如更新按钮文案或图标），得自己调用逻辑。
- 监听代码要放在初始化之后，否则第一次匹配结果可能读错：
const q = window.matchMedia('(prefers-color-scheme: dark)'); q.addEventListener('change', () => setTheme(q.matches ? 'dark' : 'light')); - 注意：该监听只响应系统级切换，用户手动点开关时，应直接调
setTheme('dark')并写入localStorage，不要等matchMedia触发 - SSR 或静态站点需在服务端/构建时预判
prefers-color-scheme请求头，否则首屏仍会 FOUC
真正难的是让所有颜色都响应变化——不只是背景和文字，边框、阴影、SVG fill、伪元素颜色都得用 var()，漏掉任意一个，换肤时就会出现“局部卡旧色”的断裂感。
