light-dark() 是 css 原生函数，非 html 功能，仅在支持浏览器（chrome 121+、safari 17.4+、firefox 125+）的 css 规则中生效，用于根据系统偏好自动切换颜色，不可用于内联样式或 js 直接调用。
light-dark 是 CSS 原生函数，不是 HTML 功能
很多人搜 light-dark_html，以为这是 HTML 标签或属性，其实它根本不存在。真正起作用的是 CSS 中的 light-dark() 函数，属于 @media (prefers-color-scheme) 的语法糖，仅在支持它的浏览器（Chrome 121+、Safari 17.4+、Firefox 125+）中可用。
它不能写在 HTML 的 style 属性里，也不能用 JS 直接调用 —— 它只出现在 CSS 声明值中，比如 color: light-dark(black, white);。
常见错误现象：
– 在 <div style="color: light-dark(black, white)"> 中写，直接被忽略（内联样式不支持该函数）<br>– 用 JS 修改 <code>element.style.color = 'light-dark(black, white)'，无效（CSSOM 不解析该函数）
– 在旧版浏览器中完全不生效，且无降级提示
怎么写才真正生效：必须用在 CSS 规则块里
light-dark() 只能出现在标准 CSS 规则的声明值位置，且依赖用户系统偏好自动切换。它不是“手动开关”，而是响应式颜色声明。
- ✅ 正确写法：
body { color: light-dark(black, white); background: light-dark(#f9f9f9, #1a1a1a); } - ✅ 支持颜色关键词、十六进制、rgb()、hsl()，但不能混用单位（如
light-dark(1rem, 2px)会报错） - ✅ 可嵌套在
var()里：:root { --text-color: light-dark(black, white); } p { color: var(--text-color); } - ❌ 不支持伪类动态触发（如
button:hover { color: light-dark(red, cyan); }虽语法合法，但实际表现取决于系统偏好，而非悬停）
替代方案：需要手动切换时别用 light-dark()
如果你要加一个“日/夜模式按钮”，light-dark() 完全不合适 —— 它只响应系统设置，无法被 JS 控制。
此时应改用 CSS 自定义属性 + 类名切换：
- 定义两套变量：
:root { --bg: #fff; --text: #000; } :root.dark { --bg: #111; --text: #eee; } - JS 切换：
document.documentElement.classList.toggle('dark') - 所有样式用
var(--bg)引用，避免重复写死 - 想兼容老浏览器？
light-dark()本身没 fallback，必须配合@supports或 JS 检测
容易被忽略的细节：颜色对比与可访问性
用 light-dark(black, white) 看似省事，但实际可能违反 WCAG 对比度要求 —— 白底黑字在亮色模式下对比度约 21:1（OK），但黑底白字在暗色模式下只有约 15:1（对小字号仍偏低）。
更稳妥的做法是选有明确对比保障的颜色组合：
- 亮色模式用
#1a1a1a（非纯黑），暗色模式用#e0e0e0（非纯白） - 用工具验证：Chrome DevTools 的「Accessibility」面板 → 「Contrast ratio」
- 不要假设用户开了系统暗色模式就一定喜欢高饱和背景 —— 很多人开暗色模式只为省电或护眼，仍倾向浅灰背景
真要用 light-dark()，得把它当成“默认响应层”，而不是最终视觉方案；复杂产品仍需结合用户主动选择 + 系统偏好 + 可访问性校验三者落地。
