怎样在CSS中使用light-dark()函数简化亮暗主题的色彩配置？-css教程-PHP中文网

在css中使用 light-dark() 函数可以简化亮暗主题的色彩配置，只需为每个颜色值提供两个参数即可自动适配系统偏好。该函数接受两个值：第一个用于浅色模式，第二个用于深色模式，浏览器会根据用户的操作系统设置自动选择应用哪一个。例如，将背景色设置为 background-color: light-dark(#ffffff, #000000); 即可实现白底黑字的自动切换。

怎样在CSS中使用light-dark()函数简化亮暗主题的色彩配置？

如何定义全局变量以复用主题色彩？

通过 CSS 自定义属性（变量）结合 light-dark() 函数，可以在 :root 中集中管理所有主题色，从而避免重复编写逻辑。定义时只需在变量赋值语句中直接调用该函数，后续引用该变量的元素会自动继承对应的亮暗色调。这种方式不仅减少了代码量，还使得后期调整主题颜色变得非常直观和便捷。

怎样在CSS中使用light-dark()函数简化亮暗主题的色彩配置？

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

::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 等工具进行转换，以确保广泛的兼容性。

怎样在CSS中使用light-dark()函数简化亮暗主题的色彩配置？

: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));
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！