<picture>需配合prefers-color-scheme媒体查询手动切换图片，正确写法为media="(prefers-color-scheme: dark)"，大小写敏感且括号不可省略；主题变更后需监听matchMedia的change事件并手动更新<img>的src，同时确保<img>提供默认fallback图。

picture元素怎么配合黑暗模式切换图片

原生 <picture> 本身不感知系统主题，必须靠 prefers-color-scheme 媒体查询手动控制 <source> 的 media 属性才能实现切换。浏览器不会自动选图，全靠你写对条件。

dark模式下<source>的media值怎么写才生效

必须用标准的 prefers-color-scheme 媒体特性，且注意大小写和空格——它只认 (prefers-color-scheme: dark)，不是 dark-mode 或 color-scheme: dark。

• media="(prefers-color-scheme: dark)" ✅ 正确（括号、冒号、空格缺一不可）
• media="prefers-color-scheme: dark" ❌ 缺括号，被忽略
• media="(prefers-color-scheme: Dark)" ❌ 大小写敏感，必须小写
• media="(prefers-color-scheme: light), (prefers-color-scheme: dark)" ✅ 可同时定义两组，但需保证 fallback <img> 存在

为什么换了主题图片没更新，刷新才显示

页面加载后系统主题变更（比如手动切暗色）不会触发 <picture> 重解析，浏览器只在初始渲染时匹配 media。这不是 bug，是规范行为。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 监听 window.matchMedia('(prefers-color-scheme: dark)') 的 change 事件
• 手动替换 <img> 的 src 或重新设置 srcset（更稳妥）
• 避免直接操作 <source> —— 它是只读的，改了也不生效
• 示例关键逻辑：

  const media = window.matchMedia('(prefers-color-scheme: dark)');
  function updateImage() {
    const img = document.querySelector('picture img');
    img.src = media.matches ? '/logo-dark.png' : '/logo-light.png';
  }
  media.addEventListener('change', updateImage);
  updateImage(); // 初始化

兼容性要注意哪些老浏览器

prefers-color-scheme 在 Safari 12.1+、Chrome 76+、Firefox 67+ 支持；IE 完全不支持，Edge 16–18 也不支持。别指望 <picture> 自动降级。

立即学习“前端免费学习笔记（深入）”；

• 没有 JS 时，所有现代浏览器都 fallback 到 <img> 的 src，所以 <img> 必须设一个默认图（通常是亮色图）
• 旧浏览器看不到 <source>，只加载 <img src>，这是预期行为
• 如果必须支持 IE，就得用 JS 检测 matchMedia 是否可用，再决定是否启用主题切换逻辑

实际项目里最容易漏掉的是 change 事件监听和初始化调用——写了 media 查询却忘了响应式更新，结果用户切暗色模式后页面卡在旧图上。这问题不报错，但体验断层。