直接用 <picture> 配合 prefers-color-scheme 媒体查询即可实现暗色/浅色主题图片自动切换，无需 JavaScript；通过 <source media="(prefers-color-scheme: dark)"> 和 <source media="(prefers-color-scheme: light)"> 分别指定深浅色图，<img> 作为不支持该特性的浏览器后备，默认使用浅色图确保兼容性。
直接用 <picture> 配合 prefers-color-scheme 媒体查询就能实现，无需 JavaScript，浏览器原生支持，语义清晰、可访问性好。
基础写法：两套图按明暗自动选
把深色图和浅色图分别写在 <source> 里，用 media 属性声明匹配条件：
-
<source media="(prefers-color-scheme: dark)" srcset="icon-dark.svg">—— 系统设为暗黑模式时加载 -
<source media="(prefers-color-scheme: light)" srcset="icon-light.svg">—— 系统设为浅色时加载 -
<img src="icon-light.svg" alt="功能图标">—— 必须保留，作为所有不支持该特性的浏览器的后备（比如旧版 Safari）
注意：<source> 按从上到下的顺序匹配，第一个满足条件的生效；<img> 不参与匹配，但决定最终渲染和屏幕阅读器读取内容。
确保兼容性：兜住不支持的环境
部分旧浏览器（如 Safari 13 以下）不识别 prefers-color-scheme，会跳过所有 <source>，直接渲染 <img>。所以：
立即学习“前端免费学习笔记（深入）”；
- 不要把
<img>的src设为空或占位符，应指向一个安全、可用的默认图（通常是浅色版） - 可选地加一条
<source media="(prefers-color-scheme: no-preference)" srcset="icon-light.svg">，覆盖“未指定主题”的情况
增强实用性：支持高倍屏和格式降级
srcset 可同时叠加响应式能力，与暗色逻辑互不干扰：
-
srcset="logo-dark@2x.png 2x, logo-dark.webp 1x"—— 同时适配视网膜屏和现代图片格式 -
type="image/webp"可配合写在<source>上，让支持 WebP 的浏览器优先加载，不支持的自然回退到<img>
搭配 CSS 微调显示效果（可选）
<picture> 本身不依赖样式，但你可以给它加 class，用 CSS 统一控制不同模式下的视觉表现：
- 例如：
<picture class="logo-theme-aware"> - 再写：
@media (prefers-color-scheme: dark) { .logo-theme-aware img { filter: brightness(0.9); } }
这样能让深色图在暗背景中更协调，又不影响语义结构。
