这是一段预览文本,展示light-dark()颜色函数的效果。切换亮色/暗色模式查看变化。
CSS light-dark() 是CSS Color Level 5规范引入的颜色函数,允许在单个CSS声明中为亮色和暗色模式指定不同的颜色值,无需使用@media (prefers-color-scheme)媒体查询。
property: light-dark(<light-color>, <dark-color>)
需要在根元素设置color-scheme: light dark;,light-dark()函数才能正确生效:
:root {
color-scheme: light dark;
}
Chrome 123+、Firefox 120+、Safari 17.5+,全球支持率约75%+。对于不支持的浏览器,建议提供回退值。
light-dark()是CSS Color Level 5引入的颜色函数,它接受两个颜色值作为参数,在亮色模式下使用第一个颜色,在暗色模式下使用第二个颜色。它根据color-scheme属性自动切换,无需媒体查询。
prefers-color-scheme是媒体查询,需要写两套CSS规则。light-dark()是单行内联函数,代码更简洁。light-dark()依赖元素的color-scheme属性,而prefers-color-scheme依赖用户系统偏好。light-dark()更适合简单的颜色切换场景。
light-dark()在Chrome 123+、Firefox 120+、Safari 17.5+中支持。不支持的浏览器会忽略该属性,因此建议提供回退颜色值。目前全球支持率约75%并持续增长。
在:root或html元素上设置color-scheme: light dark;表示同时支持亮色和暗色模式。也可以只设置light或dark来固定模式。这是light-dark()函数生效的前提条件。
完全安全。所有颜色处理在浏览器本地完成,不发送任何数据到服务器,不存储任何信息。关闭页面后数据自动清除。