chrome不提供强制网页暗黑模式api，页面需通过prefers-color-scheme媒体查询兜底、data-theme属性接管控制、localstorage持久化用户选择三者协同实现可靠响应，缺一不可。
Chrome 不提供“强制网页暗黑模式”的 API，页面自身无法主动触发浏览器级的强制深色渲染。所谓适配，本质是结构化响应系统偏好、持久化用户选择、兜住样式断点——不是强行覆盖，而是可靠接管。
为什么只写 @media (prefers-color-scheme: dark) 会失效
常见错误现象：页面首次加载时白底闪一下才变黑；夜间切换系统主题后页面无反应；Safari 或安卓 WebView 中完全不生效。
- 媒体查询必须写在
<style></style>或外链 CSS 中，不能靠 JS 动态插入或内联style属性 - 没声明
color-scheme: light dark到:root，会导致表单控件、滚动条、<input type="range">等原生元素仍为亮色 - 背景、边框、阴影、SVG 的
fill/stroke、canvas 渲染色未同步更新，视觉断裂明显 - 更高优先级规则（如第三方库的
!important）会覆盖媒体查询，需用 DevTools 的 Styles 面板逐层检查层叠顺序
data-theme 属性必须配合 CSS 预设，不能仅靠 JS 初始化
单纯执行 document.documentElement.setAttribute('data-theme', 'dark') 是危险操作：首屏必然闪白，尤其在 Safari 和部分安卓 WebView 中极其明显。
- 必须在 CSS 中预设
[data-theme="dark"]基础样式，确保 HTML 解析完成即呈现深色 - JS 只负责读取
window.matchMedia('(prefers-color-scheme: dark)').matches初始值，并写入localStorage - 监听
change事件时，先比对当前data-theme值，相同则跳过，避免无谓重绘 - iOS Safari 的往返缓存（bfcache）中，
change事件不触发，需在pageshow里重新检查matchMedia状态
localStorage 和系统偏好必须分层判断，不能硬编码优先级
用户手动切主题和系统自动切（如日落到夜间）是两类独立行为，优先级不同。以 localStorage 为准会导致系统级深色开关彻底失效。
- 加载时判断顺序：先查
localStorage.theme→ 存在则用；否则查window.matchMedia→ 匹配则用；否则 fallback 到light - 用户点击按钮切换主题时，只更新
localStorage，不修改系统设置 - 系统设置变更时（如 macOS 手动切主题），只同步页面
data-theme，不覆盖localStorage -
<img>和<video></video>默认不响应prefers-color-scheme，需额外加picture+source media或 JS 动态替换 src
最容易被忽略的是结构性断点：不是颜色没改全，而是 color-scheme 没声明、data-theme 没预设、localStorage 和系统状态没分层，三者缺一就会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
