%20isn't%20always%20the%20same%20as%20prefers-color-scheme/w_900,c_fit,co_rgb:232129,g_north_west,x_70,y_540,l_text:ubuntu_38:%40stefanjudis/stefan-judis-website/social-image-with-new-dude)
light-dark() 并不总是等同于 prefers-color-scheme (#tilPost)
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
light-dark() 和 prefers-color-scheme 的行为不同。light-dark() 需要设置 color-scheme: light dark; 才能正常工作，而 prefers-color-scheme 则依赖于操作系统的设置。这种差异可能与兼容性有关。
🎯
关键要点
- light-dark() 和 prefers-color-scheme 的行为不同。
- light-dark() 需要设置 color-scheme: light dark; 才能正常工作。
- prefers-color-scheme 依赖于操作系统的设置。
- light-dark() 允许在不使用 prefers-color-scheme 媒体查询的情况下设置两种颜色。
- 如果没有设置 color-scheme: light dark;，light-dark() 将无法正常工作。
- prefers-color-scheme 查询会根据操作系统的偏好进行反应。
- 在 Web Weekly 网站的重设计中，使用了 light-dark() 来实现颜色主题切换。
- light-dark() 可以自动切换颜色，而 prefers-color-scheme 始终依赖于操作系统设置。
- light-dark() 反映当前设置的 color-scheme，而 prefers-color-scheme 不受 color-scheme 值的影响。
❓
延伸问答
light-dark() 和 prefers-color-scheme 有什么区别？
light-dark() 需要设置 color-scheme: light dark; 才能正常工作，而 prefers-color-scheme 则依赖于操作系统的设置。
如何正确使用 light-dark()？
使用 light-dark() 时，必须在 :root 或周围容器上设置 color-scheme: light dark;，否则它将无法正常工作。
prefers-color-scheme 是如何工作的？
prefers-color-scheme 查询会根据操作系统的偏好进行反应，不受 color-scheme 值的影响。
在 Web Weekly 网站中如何实现颜色主题切换？
在 Web Weekly 网站的重设计中，使用了 light-dark() 来实现颜色主题切换，并添加了自定义颜色变量。
为什么 light-dark() 和 prefers-color-scheme 的行为不同？
这种差异可能与兼容性有关，light-dark() 反映当前设置的 color-scheme，而 prefers-color-scheme 始终依赖于操作系统设置。
使用 light-dark() 时会遇到什么问题？
如果没有设置 color-scheme: light dark;，light-dark() 将无法正常工作，导致颜色主题无法切换。
🏷️
标签
➡️
