light-dark() 不是浏览器原生支持的 CSS 函数，仅作为实验提案短暂出现于 WebKit 预览版，未进入标准；现代浏览器（Chrome/Firefox/Safari）均不解析它，需 PostCSS 插件转译才能生效；真正可靠的是 @media (prefers-color-scheme) + CSS 自定义属性方案。
light-dark() 在现代 CSS 中**不能直接根据系统主题切换颜色**——它不是浏览器原生支持的函数，写在 CSS 里会被解析器静默丢弃。
为什么 light-dark() 写了没反应？
常见现象是 DevTools 里看不到该声明、getComputedStyle 返回空或 fallback 值、页面颜色完全不随系统明暗模式变化。
- 它从未进入 CSS 标准，MDN 和 Can I Use 均无条目，仅作为实验性提案短暂出现在 WebKit 技术预览中
- Tailwind CSS 3.4+ 或
postcss-light-dark插件提供的light-dark()是编译期语法糖，需构建工具参与转译 - 若项目没配 PostCSS 插件，
color: light-dark(blue, purple)这行 CSS 等同于不存在 - 浏览器（Chrome/Firefox/Safari）当前（2026年10月）均不解析该函数，也不报错
真正起作用的明暗切换机制只有 @media (prefers-color-scheme)
这是唯一稳定、无需构建工具、被所有现代浏览器支持的原生方案（Safari 12.1+、Chrome 76+、Firefox 96+）。
- 必须配合 CSS 自定义属性使用，例如：
:root { --text-color: #333; }@media (prefers-color-scheme: dark) { :root { --text-color: #eee; } } - 所有样式通过
var(--text-color)引用，避免硬编码 - 注意：该媒体查询在 iOS 13+/Android 10+ 才可靠；微信 X5 内核等旧 WebView 完全不支持
- 服务端渲染（SSR）首屏无法感知客户端偏好，需 JS 补切或加
回退
color-scheme 和 light-dark() 的关系容易被混淆
color-scheme: light dark 是真实有效的 CSS 属性，但它只影响原生控件（如 边框、滚动条、 箭头），和 light-dark() 无关。
- 必须写在
:root或html上，写在body或组件内无效 - 必须配合
（放在最早位置）才能生效 - 它不改变你的
background-color或color，那些仍得靠@media或 JS 控制 - 所谓“
color-scheme启用后light-dark()就能用”是错误理解——前者存在，后者依然不存在
真正要落地暗黑模式，别在 CSS 里写 light-dark()，先确认构建链路是否真接入了 PostCSS 转译器；否则，老实用 @media (prefers-color-scheme: dark) + CSS 变量，这是目前最可控、兼容性最好、调试最直观的方式。JS 动态切换时，优先改 document.documentElement.classList，而不是幻想一个函数能自动接管一切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
