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

支持
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 中通过配色方案设置的。