media="(prefers-color-scheme: dark)" 仅响应系统级深色模式设置，无法通过JS手动触发；需配合data-theme属性与disabled DOM操作实现可控主题切换，且初始化脚本须置于head顶部以避免闪屏。
media="(prefers-color-scheme: dark)" 只能响应系统设置，不能手动触发
浏览器原生支持 media="(prefers-color-scheme: dark)"，但它只监听操作系统级偏好变更（如 macOS 设置深色模式），不会因用户点击按钮而改变。如果你在页面上放了个“切换深色模式”按钮，仅靠这个媒体查询是完全无效的——它压根不认你的 JS 调用。
常见错误是把 <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css"> 当作主题开关：页面加载时它可能生效，但用户点按钮后毫无反应，因为媒体查询状态没变。
- 它匹配的是系统信号，不是页面状态
- IE11 及更老浏览器完全不支持，会直接忽略该
<link> - 无法实现三主题（如浅色/深色/高对比度）或用户自定义主题
想手动切换主题，必须操作 link 元素的 disabled 属性
真正可控的方式是预置多个 <link rel="stylesheet">，全部带 data-theme 标识，然后用 JS 控制它们的 disabled 属性。浏览器对 disabled 的处理是立即生效、不重载、无 FOUC（闪屏）。
别写 document.querySelector('link[rel="stylesheet"]').href = 'dark.css' —— 这只会让旧样式失效，新 URL 不触发加载，页面瞬间无样式。
立即学习“前端免费学习笔记（深入）”；
- 所有主题
<link>必须在 HTML 中静态声明，且初始只有一个未设disabled -
disabled是 DOM 属性，必须用link.disabled = true设置，HTML 里写disabled="true"不起作用 - 切换函数示例：
function switchTheme(themeId) { document.querySelectorAll('link[data-theme]').forEach(link => { link.disabled = link.dataset.theme !== themeId; }); }
如何让系统偏好和用户选择不打架
用户开了系统深色模式，但自己又选了浅色主题，这时以谁为准？得靠初始化逻辑定优先级。通常：用户显式选择 > 系统偏好 > 默认浅色。
关键不在“怎么切”，而在“什么时候切”。如果 JS 在 DOMContentLoaded 里才读 localStorage 并设 data-theme，页面已经按默认样式渲染完了，必然闪一下。
- 初始化脚本必须塞进
<head>最顶部，且在所有<link rel="stylesheet">之前 - 必须用
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)持续监听系统变更，不能只读一次 - 监听回调里要同步更新
document.documentElement.dataset.theme和localStorage，否则下次刷新就丢状态
CSS 变量 + data-theme 类比 media 查询更可靠
用 [data-theme="dark"] :root 覆盖 CSS 变量，比依赖 @media (prefers-color-scheme: dark) 更可控。前者由 JS 主动驱动，优先级更高，兼容性更好，还能嵌套多层主题（比如 data-theme="dark high-contrast"）。
例如，:root 定义基础变量，html[data-theme="dark"] :root 重新赋值，所有 var(--bg) 自动更新。这种方式不依赖外部文件加载，切换零延迟。
- 务必在
<html>上设data-theme，不要用<body>或其他容器，否则 CSS 变量继承链会断 - 不要混用
theme和data-theme属性名，保持统一（推荐用data-theme） - 如果用了
<meta name="color-scheme" content="light dark">，也要在 JS 切换时同步更新它的content值
disabled 的 DOM 属性本质——它不是 HTML 属性，也不能靠字符串赋值，必须用 JS 显式设置布尔值。这两点一错，整个切换就变成视觉抖动+状态不同步。 
