<p>使用 prefers-color-scheme 媒体查询结合自定义属性可稳定实现亮暗色自动切换，通过定义 :root 变量并配合 oklch() 颜色空间，在不同主题下动态调整文本与背景色；利用 color-mix() 函数可在现代浏览器中混合颜色，实现渐进式背景适配；借助相对颜色语法如 oklch(from var(–bg) calc(l * 0.8) c h) 能基于背景色生成协调文字色，虽支持有限但代表未来方向；综合运用这些方法可模拟 light-dark() 效果，提升视觉一致性。</p>
css 中的 color-mix() 和 light-dark() 并不是目前标准中已广泛支持的函数，尤其是 light-dark() 目前仍处于实验阶段，并未被主流浏览器原生支持。但你提到的“让颜色自动适配背景”这一需求，实际上可以通过现代 CSS 提供的几个方法来实现，特别是结合 color-mix()、oklch()、lab() 颜色空间以及媒体查询 prefers-color-scheme 来模拟类似 light-dark() 的效果。
1. 使用 prefers-color-scheme 实现亮暗色自动切换
这是目前最稳定且广泛支持的方式。通过检测用户系统的主题偏好，动态切换颜色。
@media (prefers-color-scheme: light) { .text { color: #333; } .bg { background: white; } } <p>@media (prefers-color-scheme: dark) { .text { color: #eee; } .bg { background: #111; } }</p>
这种方式兼容性好，适合大多数场景下的亮暗主题切换。
2. 模拟 light-dark() 函数（自定义属性方案）
虽然 light-dark() 还不能直接使用，但可以用 CSS 自定义属性 + 媒体查询来模拟它的行为。
立即学习“前端免费学习笔记（深入）”；
:root { --text-primary: oklch(0.9 0 0); --bg-primary: oklch(0.15 0 0); } <p>@media (prefers-color-scheme: dark) { :root { --text-primary: oklch(0.95 0.03 240); --bg-primary: oklch(0.2 0.02 240); } }</p><p>.element { color: var(--text-primary); background: var(--bg-primary); }</p>
这种写法结构清晰，维护方便，相当于手动实现了 light-dark(亮色, 暗色) 的逻辑。
3. 使用 color-mix() 实现渐进式颜色融合
color-mix() 是真正被现代浏览器逐步支持的新特性，可以混合两种颜色，非常适合做背景适配。
.button { background: color-mix(in oklch, white 70%, black 30%); }
你可以根据背景的明暗程度，用 color-mix() 动态生成与背景协调的文本或边框颜色。比如浅色背景多混白，深色背景多混黑。
4. 结合相对颜色语法提升适配能力
CSS 新增的相对颜色语法（如 oklch(from var(--bg) calc(l * 0.8) c h)）允许你基于背景色调整文字色，实现真正的“自动适配”。
:root { --bg: oklch(0.2 0.05 240); --text: oklch(from var(--bg) calc(l > 0.5 ? 0.1 : 0.9) 0 0); }
这段代码会根据背景亮度决定文字是黑还是白。虽然当前浏览器支持有限，但代表了未来方向。
基本上就这些。现在想实现“颜色自动适配背景”，最实用的方法是结合 prefers-color-scheme 和自定义属性，再辅以 color-mix() 做平滑过渡。虽然 light-dark() 尚未落地，但用现有工具完全可以模拟出类似效果，而且更可控。不复杂但容易忽略的是：优先使用感知均匀的颜色空间如 oklch()，能大幅提升视觉一致性。