light-dark() 函数目前不可用，它仅存在于 css color module level 5 草案中，未被任何主流浏览器实现；实际开发应使用 @media (prefers-color-scheme) 媒体查询配合 :root 变量和 color-scheme 属性。
light-dark() 函数目前不能用 —— 它不是浏览器支持的 CSS 函数，写进去会被静默丢弃，不报错也不生效。
为什么 light-dark() 在你的 CSS 里没反应
你复制的示例（比如 color: light-dark(#333, #fff);）在 Chrome 126、Firefox 127、Safari 17.5 中全部无效。它只存在于 CSS Color Module Level 5 草案里，连实验性标志（如 Chromium 的 --enable-blink-features=LightDark）都已移除。编辑器标红、控制台无报错、getComputedStyle() 返回值不变 —— 这些都是典型表现。
- 不是语法错误，是“未定义函数”，浏览器直接跳过整条声明
- 不会 fallback 到第一个参数，也不会触发任何配色检测逻辑
- PostCSS 插件（如
postcss-light-dark）能把它编译成媒体查询，但那是构建时转换，不是运行时能力
真正能用的自动切换方案：用 @media (prefers-color-scheme)
这是 W3C 标准，Chrome 87+、Firefox 96+、Safari 14+ 全面支持，稳定可靠。
- 必须先定义默认值（浅色），再用
@media (prefers-color-scheme: dark)覆盖，顺序不能颠倒 - 所有变量都要在
:root中显式声明一次，例如：--text-primary: #333;，否则深色块赋值无效 - 记得加
color-scheme: light dark;到:root，否则原生控件（输入框、滚动条）不会自动适配 - 背景图、SVG 图标等需单独处理：
background-image可用媒体查询切换；<picture></picture>的<source media></source>支持(prefers-color-scheme: dark)
容易被忽略的细节：变量 fallback 和初始化时机
CSS 变量未定义时，var(--x) 会继承或退成透明，而不是取默认值。所以：
- 所有用到的变量，必须在
:root中初始化，哪怕只是占位：--bg-surface: #fff; - 使用时加 fallback：
background: var(--bg-surface, #fff);，避免意外空白 - 动态插入的
<style></style>或 JS 创建的样式表，部分浏览器（尤其是旧版 Safari）可能不重新评估媒体查询 - 用户手动切换主题时，仅靠媒体查询不够 —— 必须用
localStorage存状态，并通过document.documentElement.classList触发变量重定义
别等 light-dark() 上线。现在就用 @media (prefers-color-scheme) + :root 变量 + color-scheme，才是能上线、能维护、能 debug 的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
