使用 CSS light-dark() 实现简单的深色模式

Fri, 10 Oct 2025 00:00:00 +0900

传统深色模式的问题

传统上，实现深色模式需要将重复的 CSS 规则封装在 @media (prefers-color-scheme: dark) 中：

:root {
 --bg: #ffffff;
 --text: #111111;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg: #1a1a2e;
 --text: #e0e0e0;
 }
}

这可行，但会产生维护开销，特别是在跨大型样式表管理多个颜色属性时。 light-dark() CSS 函数完全消除了这种重复。