AI 摘要：这篇文章探讨了 CSS 新特性 light-dark() 与经典媒体查询 prefers-color-scheme 之间的区别。作者原以为前者可以“一键取代”后者，但在实际项目中发现，light-dark() 依赖于 color-scheme 属性的正确设定，而 prefers-color-scheme 完全基于操作系统的偏好。两者虽然目标相似（响应亮/暗模式），却响应机制不同，导致主题切换时的表现并不一致。开发者在实现自定义主题时，应理解它们的区别，以正确控制组件的配色逻辑。

1. 新特性背景与初衷
• 作者在 “Today I learned” 系列中分享 CSS 的最新学习经验
• 以为 light-dark() 能替换 prefers-color-scheme，从而精简代码
• MDN 对 light-dark() 的定义：能为属性设置两种颜色，而无需媒体查询

2. light-dark() 的工作条件
• 必须在 :root 或容器上设置 color-scheme: light dark; 才能生效
• 若未设定 color-scheme，light-dark() 无法根据系统主题切换
• prefers-color-scheme 无论 color-scheme 是否存在，都能响应操作系统主题

3. 实际项目中的表现差异
• 以 Web Weekly 网站重构为例，作者使用 Tailwind CSS 配置了自定义颜色变量
• light-dark() 自动翻转颜色逻辑，但 prefers-color-scheme 与 color-scheme 之间无联动
• 当通过 color-scheme 切换主题时，light-dark() 能正确响应；而 prefers-color-scheme 仍只看系统设置
• 这种行为差异源于 prefers-color-scheme 的历史兼容性设计

4. 结论与经验
• light-dark() 并非 prefers-color-scheme 的替代品，而是基于 color-scheme 工作的全新机制
• prefers-color-scheme 更偏向全局系统偏好，light-dark() 更适合组件级主题控制
• 实现主题切换前，应明确两者触发机制，避免预期不符

Stefanjudis

light-dark isn't the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.