在css中使用 light-dark() 函数可以简化亮暗主题的色彩配置，只需为每个颜色值提供两个参数即可自动适配系统偏好。该函数接受两个值：第一个用于浅色模式，第二个用于深色模式，浏览器会根据用户的操作系统设置自动选择应用哪一个。例如，将背景色设置为 background-color: light-dark(#ffffff, #000000); 即可实现白底黑字的自动切换。
如何定义全局变量以复用主题色彩？
通过 CSS 自定义属性（变量）结合 light-dark() 函数，可以在 :root 中集中管理所有主题色，从而避免重复编写逻辑。定义时只需在变量赋值语句中直接调用该函数，后续引用该变量的元素会自动继承对应的亮暗色调。这种方式不仅减少了代码量，还使得后期调整主题颜色变得非常直观和便捷。
::root {
--bg-color: light-dark(#f5f5f5, #1a1a1a);
--text-color: light-dark(#333333, #e0e0e0);
--border-color: light-dark(#dddddd, #444444);
}
body {
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
}
如何处理不支持该函数的旧版浏览器？
对于尚未支持 light-dark() 的浏览器，可以通过提供回退值或使用媒体查询进行兼容处理。在 light-dark() 内部无法直接添加 fallback，但可以在变量定义层或样式层使用 @media (prefers-color-scheme: dark) 覆盖默认样式。建议在开发环境中优先使用现代浏览器测试，并在生产环境中结合 PostCSS 等工具进行转换，以确保广泛的兼容性。
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-color: #f5f5f5; /* Fallback for old browsers */
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
}
}
/* Modern approach with light-dark() */
:root {
--bg-modern: light-dark(#f5f5f5, #1a1a1a);
--text-modern: light-dark(#333333, #e0e0e0);
}
body {
background-color: var(--bg-modern, var(--bg-color));
color: var(--text-modern, var(--text-color));
} 
