直接用@media (prefers-color-scheme: dark)可实现系统级深色模式自动响应，无需js；通过css变量定义明暗主题、切换图片、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)引用，样式层完全解耦
图像自动切换：用 标签
文字能切，图片也要跟上。HTML5 的 <picture></picture> 天然支持媒体查询，不依赖 JS：
- 结构示例：
<picture><br><source media="(prefers-color-scheme: dark)" srcset="icon-dark.svg"><br><source media="(prefers-color-scheme: light)" srcset="icon-light.svg"><br> @@##@@<br></source></source></picture>
-
<source></source>按顺序匹配，第一个满足条件的生效 -
<img src="icon-light.svg" alt="logo">是必需后备，旧浏览器或不支持特性时直接使用它
兼容性与降级处理
不是所有环境都支持 prefers-color-scheme，得留好退路：
- iOS 13+/Android 10+、Chrome 76+、Firefox 67+、Safari 12.1+ 均支持；更老版本会跳过媒体规则，只渲染默认样式
- 避免把
<img>留空，<img src="">的src应指向一个通用安全图（通常是浅色版） - 可加一条
media="(prefers-color-scheme: no-preference)"处理未设主题的情况，通常按浅色逻辑走
进阶：配合 meta 和 color-scheme 声明
告诉浏览器你支持双模式，有助于默认表单控件、滚动条等原生元素也适配：
- 在
加：<meta name="color-scheme" content="light dark"> - 或在 CSS 中写：
:root { color-scheme: light dark; } - 注意：这不会改变你写的样式，只影响浏览器内置 UI 元素的配色
