直接用@media (prefers-color-scheme: dark)可实现系统级深色模式自动响应，无需JS；通过CSS变量定义明暗主题、<picture>切换图片、meta/color-scheme声明双模式支持，并兼顾旧浏览器降级。

直接用 @media (prefers-color-scheme: dark) 就能实现系统级深色模式自动响应，无需 JavaScript，浏览器原生支持，加载快、无闪屏。

基础写法：用媒体查询定义明暗样式

把颜色抽成 CSS 变量，再用媒体查询在 :root 中覆盖，是最干净的写法：

• 先在 :root 定义默认浅色变量：
  :root { --bg: #fff; --text: #333; }
• 再用媒体查询覆盖深色值：
  @media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } }
• 所有元素用 var(--bg)、var(--text) 引用，样式层完全解耦

图像自动切换：用 <picture> 标签

文字能切，图片也要跟上。HTML5 的 <picture> 天然支持媒体查询，不依赖 JS：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 结构示例：
  

  <picture><br>  <source media="(prefers-color-scheme: dark)" srcset="icon-dark.svg"><br>  <source media="(prefers-color-scheme: light)" srcset="icon-light.svg"><br>  <img src="icon-light.svg" alt="logo"><br></picture>

• <source> 按顺序匹配，第一个满足条件的生效
• <img> 是必需后备，旧浏览器或不支持特性时直接使用它

兼容性与降级处理

不是所有环境都支持 prefers-color-scheme，得留好退路：

• iOS 13+/Android 10+、Chrome 76+、Firefox 67+、Safari 12.1+ 均支持；更老版本会跳过媒体规则，只渲染默认样式
• 避免把 <img src=""> 留空，<img> 的 src 应指向一个通用安全图（通常是浅色版）
• 可加一条 media="(prefers-color-scheme: no-preference)" 处理未设主题的情况，通常按浅色逻辑走

进阶：配合 meta 和 color-scheme 声明

告诉浏览器你支持双模式，有助于默认表单控件、滚动条等原生元素也适配：

• 在 <head> 加：
  <meta name="color-scheme" content="light dark">
• 或在 CSS 中写：
  :root { color-scheme: light dark; }
• 注意：这不会改变你写的样式，只影响浏览器内置 UI 元素的配色