@media (prefers-color-scheme: dark)不生效主因是环境或结构问题，非代码错误：系统未开启深色模式、file://协议限制、css未加载、缺少默认样式兜底、或自定义元素未手动适配。
直接用 @media (prefers-color-scheme: dark) 就能检测系统是否开了深色模式，不需要 JS，但必须写对语法、顺序和回退逻辑，否则在深色系统下文字直接消失或白屏。
为什么 @media (prefers-color-scheme: dark) 不生效
常见失效不是代码写错，而是环境或结构问题：
- 系统根本没开深色模式 → 先去 macOS「系统设置」、Windows「设置 → 个性化 → 颜色」或 iOS「设置 → 显示与亮度」确认
- 本地双击打开 HTML（
file://协议）→ Safari 会禁用该媒体查询，Chrome 可能降级处理；改用python3 -m http.server启个本地服务再测 - CSS 文件未加载或有语法错误 → 打开 DevTools 的「Styles」面板，看对应规则是否灰掉（disabled）
- 写了
@media却没配默认样式 → 深色系统下所有没被覆盖的元素沿用浏览器默认（比如body白底黑字），一旦你只改了color没改background，就变成黑字配黑底
window.matchMedia 怎么安全读取当前偏好
JS 里不能靠 prefers-dark-mode 或拼错的 prefers-dark-scheme —— 这些根本不存在。正确写法是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
注意点：
- 它返回的是布尔值，不是事件对象，别当成 Promise 或回调用
- 要监听系统切换，必须显式绑定
change事件：window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handler) - Safari 14+、Chrome 87+、Firefox 96+ 才稳定支持
change，旧版只能 reload 或轮询 - 别在页面刚加载时就假设
matches是最终值 —— 它可能被后续 JS 覆盖或 localStorage 干扰
怎么避免暗色下表单、图片、SVG 全糊成一片
prefers-color-scheme 不会自动翻转任何自定义内容，它只触发 CSS 规则。这些地方必须手动适配：
-
<input type="range">、<select></select>等原生控件：加color-scheme: light dark到:root或html，再配合@media显式设background、border、color -
<img>和<svg></svg>：别依赖“自动变暗”，深色下图标发灰就加filter: brightness(0.8)或换暗色版本；SVG 内联时用currentColor配合color变量更可控 - 阴影和边框：暗色下
box-shadow: 0 2px 4px rgba(0,0,0,0.8)太重，换成rgba(0,0,0,0.2)；border: 1px solid #ccc在黑底上几乎看不见，得改成#444或变量 - 焦点 outline：暗色下默认
outline: -webkit-focus-ring-color可能不可见，显式写outline: 2px solid var(--accent)
真正难的不是写多少规则，而是意识到 prefers-color-scheme 只是个信号源——它不接管你的颜色、不修复对比度、也不管用户点了开关后要不要覆盖它。所有视觉异常，根源都在「默认样式没兜底」或「自定义元素没同步响应」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
