chrome不提供强制网页暗黑模式api，页面需通过prefers-color-scheme媒体查询兜底、data-theme属性接管控制、localstorage持久化用户选择三者协同实现可靠响应，缺一不可。
Chrome 本身不提供“强制网页暗黑模式”的 API 给 HTML 页面调用，所谓“强制”，只能靠浏览器级干预（如 --force-dark-mode）或开发者主动适配。页面自身能做的，是结构化响应系统偏好、持久化用户选择、避免样式断裂——不是强行覆盖，而是可靠接管。
如何让 HTML 页面真正响应 prefers-color-scheme: dark
这是所有结构化适配的起点。只写 @media (prefers-color-scheme: dark) 不够，容易漏掉初始状态或动态切换失效。
- 必须在
<style></style>或外链 CSS 中声明，不能靠内联style属性 - 推荐同时声明
color-scheme: light dark到:root，让表单控件、滚动条等原生元素自动跟随 - 别只改文字颜色：背景、边框、阴影、SVG fill/stroke、
canvas渲染色都要同步处理 - 若页面首次加载时系统已是深色，但 CSS 没生效，大概率是媒体查询被更高优先级规则覆盖，用 DevTools 的 Styles 面板检查层叠顺序
data-theme 属性为什么不能只靠 JS 初始化
单纯在 JS 里 document.documentElement.setAttribute('data-theme', 'dark') 是危险的——页面会先闪一次亮色，再变暗，尤其在 Safari 和部分安卓 WebView 中明显。
- 必须配合
@media (prefers-color-scheme: dark)在 CSS 中预设[data-theme="dark"]的基础样式，确保首屏即深色 - JS 的作用是“同步”和“持久化”：读取
window.matchMedia('(prefers-color-scheme: dark)').matches初始值，并存入localStorage - 监听
change事件时，要立刻更新data-theme，但不要重复设置——已存在且值相同时跳过，避免无谓重绘
为什么 localStorage + 系统偏好要分层判断
用户可能手动切主题，也可能系统自动切（比如 macOS 日落到夜间），二者优先级不同。硬编码“以 localStorage 为准”会导致系统级深色开关失效。
- 加载时按此顺序判断：
localStorage.theme→ 存在则用；否则看window.matchMedia→ 匹配则用；否则 fallback 到light - 用户手动切换主题时，只写
localStorage，不改系统设置；系统设置变更时，只更新页面，不覆盖localStorage - 关键细节：iOS Safari 的往返缓存（bfcache）中，
change事件不触发，需在pageshow里重新检查matchMedia状态
哪些地方最容易被忽略导致深色模式翻车
不是样式没写全，而是结构性断点没兜住。
-
<img>和<video></video>默认不响应prefers-color-scheme，深色背景下白底图片刺眼——要么加background-color容器包裹，要么用picture+media切换暗色版本 -
canvas内容完全不受 CSS 控制，需 JS 根据matchMedia结果重绘，或提前缓存两套绘图逻辑 - 第三方组件（如地图 SDK、图表库）常自带亮色默认样式，得查其文档是否支持
theme参数，或用!important强制覆盖（慎用） - 深色模式下
outline和focus-visible若仍用浅色高亮，可读性崩坏——务必单独定义深色焦点样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
