CSS技巧：无需媒体查询实现图片深色模式适配

告别 media query：用 light-dark() 统一处理主题切换

过去处理浅色/深色模式，CSS 开发者习惯用 prefers-color-scheme 媒体查询把两套样式硬编码在一起。这种方式虽然可行，却意味着每换一个组件就要重复写一遍媒体查询，维护成本高，边界情况也多。

CSS 的 light-dark() 颜色函数改变了这个局面。它允许在同一个属性声明里同时给出浅色和深色两种取值，浏览器根据当前生效的配色方案自动选择。原本需要拆成两段媒体查询的代码，现在压缩成一行。

据 YouTube 技术频道分享的实践经验，把项目里的 prefers-color-scheme 统一替换为 light-dark() 后，开发者工具的模拟切换一切正常——背景、文字、边框都跟着主题走，没有额外适配成本。这种方式不只是写法更短，它把“主题”从布局逻辑里抽出来，交给颜色函数自己处理。

prefers-color-scheme 媒体查询是 CSS 提供的一种媒体特性，用于检测用户操作系统或浏览器层面设置的配色偏好（light 或 dark）。传统的主题切换实现通常写成两块：@media (prefers-color-scheme: light) { ... } 和 @media (prefers-color-scheme: dark) { ... }，在两段里分别声明同一组属性的不同取值。这种做法的问题在于：每新增一个需要适配主题的组件，就要重复写一遍媒体查询，代码量随组件数量线性增长；而且媒体查询作用于整段规则块，无法在单条声明内部做条件取值，导致布局逻辑和颜色逻辑纠缠在一起。light-dark() 正是把这种“块级条件”下沉为“值级条件”，让主题选择由颜色函数自身完成。

图片也能用 light-dark() 了

真正让这次更新值得单独拿出来讲的，是 light-dark() 开始支持图片资源。以前切换深色模式时，背景图往往是最尴尬的一环：文字颜色变了，图片还是亮色版本，视觉上非常割裂。想换图，又得回到媒体查询的老路。

现在可以直接在 background-image 里使用 light-dark()，一行声明同时挂载浅色和深色两张图片。切换主题时，浏览器自动替换图片资源，不需要任何 JavaScript 或额外的媒体查询。

这个能力补上了主题切换体验里最后一块拼图。图片和文字终于可以在同一套机制下联动，整站视觉一致性变得容易实现。

background-image 是 CSS 中用于为元素设置背景图片的属性，它本身可以接受 URL、渐变、图像集（image-set()）等多种图像值。过去要让背景图随主题切换，只能借助媒体查询覆盖整个 background-image 声明，或使用 image-set() 配合分辨率条件（但后者面向的是 DPI 而非配色方案）。light-dark() 现在可以放入 background-image 的值位置，意味着单个属性声明即可携带两张图片资源，由浏览器根据当前 color-scheme 决定加载哪一张。需要注意的是，未选中的那张图片通常不会被下载，因此这一机制在带来便利的同时也不会明显增加带宽开销。

锁定局部配色：让组件“不跟随”全局主题

light-dark() 还带来一个更微妙的控制力：你可以强制某个元素锁定在特定配色方案里，无论全局主题如何变化。

做法是给目标选择器声明 color-scheme: dark 或 color-scheme: light。此后该区域内的所有 light-dark() 取值都会以锁定的方案为准。测试时把整站切到浅色，这个局部依然呈现深色版本，效果稳定。

这里有一个容易踩的坑：文字颜色默认继承自 body，全局主题切换时文字会跟着翻转，但被锁定的容器内部并不会自动同步。

解决办法很简单——在锁定容器内显式声明文字颜色。这样无论外层主题是什么，内部配色都完全可控。

据该频道观点，强制锁定深色主题的用法在日常项目中可能并不常见，因为更省事的做法是只做一套深色样式。但这个机制真正的价值在于嵌套场景：页面里某些区域需要跟随全局主题，另一些区域需要保持独立，color-scheme 提供了干净的隔离边界。

color-scheme 是一个 CSS 属性，用于告诉浏览器元素及其子树应当采用哪种配色方案来渲染原生 UI 控件（如滚动条、表单控件）以及解析 light-dark() 和系统颜色关键字（如 Canvas、ButtonText）。它的取值可以是 light、dark、normal，也可以写成 light dark 表示两者都支持、由用户偏好决定。在 light-dark() 的语境下，color-scheme 扮演的是“决策者”角色：某个元素上生效的 color-scheme 决定了它内部所有 light-dark() 函数取浅色还是深色值。因此，给局部容器设置 color-scheme: dark 就等于为该区域划定了独立的配色上下文，无论全局主题如何切换，其内部的 light-dark() 都会稳定解析为深色分支，这正是实现嵌套主题隔离的底层机制。

浏览器支持与上线建议

light-dark() 目前的整体支持度已经接近 90%，在三大浏览器引擎中都达到了“新近可用”的状态——这意味着它已经进入所有主流引擎，不再是实验性特性。

但图片场景的支持情况稍差一些。颜色值的 light-dark() 可以先上，图片资源的 light-dark() 则需要结合目标用户的浏览器分布做判断。如果你的项目需要覆盖较老的浏览器，可以保留媒体查询作为降级方案，或者用 @supports 做能力检测。

一个务实的迁移路径是：先把颜色相关声明切换为 light-dark()，验证主题切换没有回归问题；再逐步把背景图等资源切换过去，同时监控浏览器支持数据的变化。

@supports 是 CSS 的条件规则，用于检测浏览器是否支持某个属性或属性值对，语法为 @supports (property: value) { ... }。在主题切换的降级策略中，可以用 @supports (background-image: light-dark(url(a), url(b))) 来判断当前浏览器是否支持图片形式的 light-dark()：支持则在块内写入新写法，不支持则回退到媒体查询或单张默认图片。相比直接依赖浏览器版本判断，@supports 基于实际能力检测，能更精确地覆盖各种引擎实现差异，也便于在支持度逐步提升后安全地移除降级代码。