html5 标签配合 prefers-color-scheme 媒体查询可原生实现暗黑模式图像自动切换：通过 和 分别指定深浅色图，由 提供必需后备，语义化、无 js、高可访问性。

使用 HTML5 的 <picture></picture> 标签配合 prefers-color-scheme 媒体查询，可以实现暗黑模式下自动切换深色系图像，无需 JavaScript，纯原生、语义化、可访问性强。

核心原理：用 media 属性匹配系统配色偏好

<picture></picture> 允许为不同条件提供多套图像源。关键在于利用 media 属性监听 (prefers-color-scheme: dark) 这一 CSS 媒体特性，它会根据用户操作系统或浏览器设置的深色/浅色主题实时响应。

基础写法：两套图像按明暗自动选择

以下是一个典型结构，优先加载深色图（适配暗黑模式），回退到浅色图（默认）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

       media="(prefers-color-scheme: dark)"
    srcset="logo-dark.png" />
       media="(prefers-color-scheme: light)"
    srcset="logo-light.png" />
  

• <source></source> 按声明顺序从上到下匹配，第一个满足 media 条件的生效
• 必须保留 <img> 标签作为必需的后备内容，它不参与媒体查询，但决定最终渲染和可访问性
• srcset 可扩展支持响应式尺寸（如 srcset="logo-dark@2x.png 2x"），与暗色逻辑正交

增强兼容性：兼顾不支持 prefers-color-scheme 的旧环境

部分旧版 Safari 或桌面浏览器可能不识别该媒体特性。建议将最通用的图像（通常是浅色版）放在最后的 <img> 中，并确保它在无 JS、无媒体查询支持时仍可用：

• 避免把 <img> 的 src 设为空或占位符，应指向一个安全的默认图
• 若需更高兼容性，可额外添加 media="(prefers-color-scheme: no-preference)" 匹配“未指定主题”的情况，通常也走浅色路径
• 无需 polyfill —— 不支持该特性的浏览器会跳过所有 <source></source>，直接渲染 <img>

进阶技巧：结合 CSS 自定义属性动态控制（可选）

虽然 <picture></picture> 本身不依赖 CSS，但你可以用 CSS 配合 :is() 或 @media 控制容器样式，让深色图在暗黑模式下更协调：

• 例如给 <picture></picture> 添加 class：<picture class="theme-aware-logo"></picture>
• 在 CSS 中统一处理边框、背景或滤镜：
  @media (prefers-color-scheme: dark) {
    .theme-aware-logo img { filter: brightness(0.9); }
  }
• 注意：不要用 CSS 覆盖 <img> 的 src——这会破坏语义和可访问性，应始终由 <picture></picture> 结构控制图像源

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！