# 帮助需求：在Discourse中为明暗模式分配不同的CSS根

**URL:** https://meta.discourse.org/t/help-needed-assigning-separate-css-roots-for-light-and-dark-modes-in-discourse/335070
**Category:** Development
**Created:** [2024年十一月7日 22:51 UTC](https://meta.discourse.org/t/help-needed-assigning-separate-css-roots-for-light-and-dark-modes-in-discourse/335070 "2024-11-07T22:51:47Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![willie](https://avatars.discourse-cdn.com/v4/letter/w/838e76/32.png) [@willie](https://meta.discourse.org/u/willie)
#### Post date: [2024年十一月7日 22:51 UTC](https://meta.discourse.org/t/help-needed-assigning-separate-css-roots-for-light-and-dark-modes-in-discourse/335070/1 "2024-11-07T22:51:47Z")

</div>

这是您消息的专业翻译：

我目前正在使用 [Discourse Color Scheme Toggle](https://github.com/discourse/discourse-color-scheme-toggle)。

在我的本地主机上，我已经启用了浅色和深色模式。我已经为我的网站设置了一个专门的 CSS 根。但是，我不确定如何为浅色模式分配一个 CSS 根，为深色模式分配另一个 CSS 根。

有人能帮我解决这个问题吗？

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2024年十二月3日 22:55 UTC](https://meta.discourse.org/t/help-needed-assigning-separate-css-roots-for-light-and-dark-modes-in-discourse/335070/2 "2024-12-03T22:55:20Z")

</div>

嘿，

我不确定我是否正确理解了您的上下文。如果不是，请告诉我。  
您可以将您的 `:root` 包装在以下 CSS 中：

```css
/* 默认浅色 */
:root {
  --background-color: white;
  --text-color: black;
  ...
}

/* 深色 */
@media (prefers-color-scheme: dark) {
  :root {
     --background-color: black;
     --text-color: white;
     ...
   }
}

```

还存在 `prefers-color-scheme: light`。

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2025年一月2日 22:55 UTC](https://meta.discourse.org/t/help-needed-assigning-separate-css-roots-for-light-and-dark-modes-in-discourse/335070/3 "2025-01-02T22:55:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.