真正可靠的降级路径是浏览器不支持prefers-color-scheme时跳过所有<source>直接渲染语义安全、视觉中性的默认<img>，其src须为浅色版图且不可为空或data URL；<source>顺序应深色优先；alt需真实描述内容；需声明color-scheme meta、避免内联样式覆盖、校验CSS加载顺序；第三方组件不支持<picture>时应改用data属性+JS动态赋值或CSS显隐控制；iOS WebView需显式启用prefersColorScheme，Safari 14前需轮询matches；OLED屏建议用#121212而非#000；SVG图标fill应为currentColor。
图片在暗黑模式下刺眼，picture 降级逻辑必须写对
直接用 background-image 或单个 <img src> 加媒体查询，几乎必然导致深色背景下亮图突兀、加载错乱或 fallback 失效。真正可靠的降级路径是：浏览器不支持 prefers-color-scheme → 跳过所有 <source> → 渲染 <img>；而这个 <img> 必须是语义安全、可访问、视觉中性的默认图。
实操建议：
-
<img>的src必须指向一个在浅色/深色下都可用的图（通常是浅色版），不能为空、不能是占位符、不能是 data URL -
<source>标签顺序很重要：浏览器从上到下匹配，第一个media为 true 的生效，所以深色优先应放在前面 - 不要把暗色图设为
<img>的src，否则不支持媒体查询的旧环境（如 Safari 13.1 以下）会强制显示暗色图，用户看到一片黑底灰字 -
alt文本必须真实描述图像内容，不可写“深色模式 logo”之类条件性描述
prefers-color-scheme 不生效？检查这三处硬性限制
写了 @media (prefers-color-scheme: dark) 却没反应，大概率不是 CSS 写错了，而是被更高优先级规则覆盖，或根本没进入匹配流程。
常见卡点：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 页面未声明
<meta name="color-scheme" content="light dark">，部分安卓 WebView 和旧版 iOS Safari 会忽略系统偏好 -
<html>或<body>上有内联style强制设置了背景色，它会盖过媒体查询样式 - CSS 文件加载顺序错误：自定义主题类（如
.dark-mode）的样式表如果后加载，会覆盖@media规则 - 开发工具里手动模拟暗色模式时，Chrome DevTools 的
Rendering面板需勾选Emulate CSS media feature prefers-color-scheme，而非只切系统设置
第三方图片组件不认 picture？绕过它用 CSS 控制显隐
像 <img> 封装过的 React 组件（如 Next/Image、GatsbyImage）或 CDN 图片服务（Cloudinary、Imgix）通常不解析 <picture> 结构，它们只认 src 属性。这时硬塞 <picture> 没用，得换策略。
推荐做法：
- 用
data-src-dark和data-src-light存两套地址，JS 初始化时根据matchMedia('(prefers-color-scheme: dark)').matches动态赋值src - 更轻量的方式：给图片容器加 class，用 CSS 控制两套
<img>的display状态，例如：.theme-img-light { display: block; }+@media (prefers-color-scheme: dark) { .theme-img-dark { display: block; } .theme-img-light { display: none; } } - 避免用 JS 修改
srcset—— 它可能触发重复加载，尤其在滚动懒加载场景下
暗黑模式图片适配最容易被忽略的兼容性细节
很多团队测试只跑最新 Chrome，结果上线后收到大量 iOS 用户反馈：“图标全黑了”“头像看不见”。问题往往出在 Safari 对 prefers-color-scheme 的实现差异和系统级限制。
关键事实：
- iOS 13+ Safari 支持
prefers-color-scheme，但仅限于主窗口，WebView（如 WKWebView）需显式启用prefersColorScheme配置项，否则始终返回light - Safari 14 之前不支持
matchMedia(...).addEventListener('change', ...)，必须轮询.matches，否则系统切换主题后页面不响应 - OLED 屏幕下，纯黑（
#000000）和深灰（#121212）功耗差异极大，图片底色建议用#121212而非全黑，既省电又避免烧屏风险 - SVG 内联图标若含
fill="#000"，在暗色模式下会和背景融成一片，必须用fill="currentColor"并靠父元素color控制
最麻烦的不是写不对，而是写对了却没测全——iOS WebView、旧版 Safari、高对比度辅助模式、甚至 Windows 的“深色应用模式”和“深色系统模式”行为都不一样。图片降级不是加个 <source> 就完事，它得在每种失效路径下都有确定的视觉出口。
