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

**URL:** https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647
**Category:** Development
**Created:** [2026年七月27日 20:36 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647 "2026-07-27T20:36:46Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2026年七月27日 21:30 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647/2 "2026-07-27T21:30:32Z")

</div>

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

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

```

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

你可以在这里查看一些示例：[https://meta.discourse.org/styleguide/atoms/colors，并观察它们在切换深色/浅色模式时的变化。这些变量是在](https://meta.discourse.org/styleguide/atoms/colors%EF%BC%8C%E5%B9%B6%E8%A7%82%E5%AF%9F%E5%AE%83%E4%BB%AC%E5%9C%A8%E5%88%87%E6%8D%A2%E6%B7%B1%E8%89%B2/%E6%B5%85%E8%89%B2%E6%A8%A1%E5%BC%8F%E6%97%B6%E7%9A%84%E5%8F%98%E5%8C%96%E3%80%82%E8%BF%99%E4%BA%9B%E5%8F%98%E9%87%8F%E6%98%AF%E5%9C%A8) `/admin/config/colors` 中通过配色方案设置的。

---

_[View the full topic](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647)._