正确编辑浅色和深色模式 CSS 的方法

支持
1

我需要为浅色和深色模式编辑大量 CSS。我在论坛上读过几篇帖子，说没有可靠的方法来实现这一点，包括

不过，这些帖子大多比较旧了。在 2026 年是否有更简单的方法？我测试了以下代码：

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

我不确定这是否正确，但它确实有效。

2

容器查询可以工作，但为了简化操作，你也可以使用 CSS 中的原生 light-dark() 函数来实现：

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

通常，在 Discourse 中，我们依赖自动切换的颜色变量，以避免以这种方式设置具体颜色（如 --primary、--secondary 等）……这样无论采用何种配色方案，颜色都能正常显示。

你可以在这里查看一些示例：https://meta.discourse.org/styleguide/atoms/colors，并观察它们在切换深色/浅色模式时的变化。这些变量是在 /admin/config/colors 中通过配色方案设置的。

3

太棒了，非常谢谢你，Kris。顺便提一下，那个链接无法使用。