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