CSS light-dark()生成器零依赖·可离线使用

🎨 颜色配置

📋 预设配色方案

👁 实时预览

预览文本效果

这是一段预览文本,展示light-dark()颜色函数的效果。切换亮色/暗色模式查看变化。

边框颜色预览
背景颜色预览

📝 生成代码


📖 关于CSS 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%+。对于不支持的浏览器,建议提供回退值。

❓ 常见问题

什么是CSS light-dark()函数?

light-dark()是CSS Color Level 5引入的颜色函数,它接受两个颜色值作为参数,在亮色模式下使用第一个颜色,在暗色模式下使用第二个颜色。它根据color-scheme属性自动切换,无需媒体查询。

light-dark()和prefers-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%并持续增长。

如何设置color-scheme?

在:root或html元素上设置color-scheme: light dark;表示同时支持亮色和暗色模式。也可以只设置light或dark来固定模式。这是light-dark()函数生效的前提条件。

数据安全吗?

完全安全。所有颜色处理在浏览器本地完成,不发送任何数据到服务器,不存储任何信息。关闭页面后数据自动清除。