# Dracula 一个适用于 Discourse 的暗色主题

**URL:** https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350
**Category:** Theme
**Created:** [2020年三月31日 22:13 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350 "2020-03-31T22:13:42Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2020年三月31日 22:13 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/1 "2020-03-31T22:13:42Z")

</div>

这是一个基于 [Dracula 配色方案](https://draculatheme.com/contribute#color-palette) 构建的主题。该配色方案一直是我在文本编辑器和其他软件中最喜爱的首选主题之一。

我觉得 Discourse 也可以采用它 😄

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/3/c3f9daa57ac1f3e5eadde83cfa36d6d7c2a10d7f.png)

🦇 : GitHub 仓库 `https://github.com/dracula/discourse`

🧛 [在主题创建器中预览](https://theme-creator.discourse.org/theme/jordan.vidrine/dracula)

⚰ [如何安装主题或主题组件？](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

如果您发现任何问题，请在此告知，我会尽快更新！希望您喜欢 🥰

---

<div class="post-metadata">

### Author: ![itsbhanusharma](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/itsbhanusharma/32/180717_2.png) [@itsbhanusharma](https://meta.discourse.org/u/itsbhanusharma)
#### Post date: [2020年四月1日 03:56 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/2 "2020-04-01T03:56:15Z")

</div>

这看起来确实非常整洁。

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2020年四月1日 07:35 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/4 "2020-04-01T07:35:18Z")

</div>

看起来很棒，我确实能感受到德古拉的氛围。

---

<div class="post-metadata">

### Author: ![bubblecatcher](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@bubblecatcher](https://meta.discourse.org/u/bubblecatcher)
#### Post date: [2020年八月22日 12:28 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/7 "2020-08-22T12:28:48Z")

</div>

颜色是固定的还是可以更改的？

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2020年八月25日 22:06 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/8 "2020-08-25T22:06:00Z")

</div>

主题颜色在定义后对于每个主题/配色方案是固定的。不过，如果您希望为自己的用途进行自定义，欢迎 fork 该仓库，并在 `about.json` 文件中修改颜色。🧛

---

<div class="post-metadata">

### Author: ![LMD](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@LMD](https://meta.discourse.org/u/LMD)
#### Post date: [2021年六月23日 01:22 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/21 "2021-06-23T01:22:42Z")

</div>

您好，

在移动视图下，如何隐藏“回复”列并显示“浏览量”列？谢谢。

更新：已找到隐藏“回复”列的解决方法，但无法确定如何添加“浏览量”列。

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2021年六月23日 14:00 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/22 "2021-06-23T14:00:56Z")

</div>

我们在移动设备上不显示“浏览量”计数，仅显示“活跃度”和“回复数”。若要创建您自己的移动话题列表视图，您需要创建一个主题组件，用于编辑位于以下地址的移动端 `topic-list-item` 模板：

> <https://github.com/discourse/discourse/blob/515fd8a4c32a356a005510fe4a11ce0f976dda27/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr>

本论坛中有人做过类似操作，可参考以下话题示例：[https://meta.discourse.org/t/md-topic-list-mobile-component/146341。](https://meta.discourse.org/t/md-topic-list-mobile-component/146341%E3%80%82)

* * *

如果您此前未曾创建过主题或主题组件，建议您阅读以下话题，其中对创建过程进行了详尽说明：

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

---

<div class="post-metadata">

### Author: ![olivia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/olivia/32/324299_2.png) [@olivia](https://meta.discourse.org/u/olivia)
#### Post date: [2024年一月17日 08:10 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/30 "2024-01-17T08:10:49Z")

</div>

**Dracula 主题 - 颜色问题**

**描述：** 在我们的 Discourse 站点上遇到了 Dracula 主题的问题。该主题的外观与其预期外观不同，尤其是在颜色方案和标签外观方面。最初，该主题在我测试的站点上显示与其他使用 Dracula 的站点不同。从 GitHub 存储库重新安装后，外观一致，这表明可能存在过时的代码或变量使用问题。  
**重现步骤：**

1. 通过“管理”→“自定义”→“主题”安装 Dracula 主题。
2. 将其设置为默认主题。
3. 在“管理”→“自定义”下禁用用户其他主题和颜色方案选项。
4. 在我的个人资料（首选项 → 界面）中确认 Dracula 是唯一可选择的主题，确保我查看的是其默认设置。
5. 注意到外观差异，尤其是标签，其外观不符合预期（表明主题可能存在问题）。

**屏幕截图：**

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/f/4/0f453cf4b448ea062b31edd079299978c96c80a6.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/9/b/99bd261d2bfceeab439b972e9d5fcc9b42ec0ff0.jpeg)

**平台：**

- Mac (桌面)

**浏览器：**

- Chrome

**附加评论：** 该问题似乎源于主题中使用了过时的 CSS 变量。Dracula 主题中的当前语法（$primary、$tertiary、$secondary）与 Discourse 最新主题中使用的较新变量格式（var(–tertiary)、var(–secondary)）相比已过时，[如 GitHub 示例所示](https://github.com/dracula/discourse/blob/eac56a3e304bad3444aed6f40a5eaad270ac3932/common/common.scss#L186)。这种旧的变量使用很可能导致异常的渲染，尤其是在没有其他可选主题或颜色方案时。即使重新安装主题后问题仍然存在，这表明主题的代码结构存在更深层的问题。

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年一月17日 21:11 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/31 "2024-01-17T21:11:20Z")

</div>

谢谢分享！我正在处理一个修复程序。

---

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [2024年三月21日 06:31 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/32 "2024-03-21T06:31:59Z")

</div>

是否可以将此设置为主题？

我需要在侧边栏主题切换列表中显示此内容。

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年三月21日 16:15 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/33 "2024-03-21T16:15:46Z")

</div>

您是要求将其安装在 meta 和侧边栏上吗？

颜色方案实际上是您现在也可以在 Discourse 中选择的一种。

---

<div class="post-metadata">

### Author: ![Matthias\_Schuster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matthias_schuster/32/389927_2.png) [@Matthias\_Schuster](https://meta.discourse.org/u/Matthias_Schuster)
#### Post date: [2024年六月1日 17:50 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/34 "2024-06-01T17:50:59Z")

</div>

是的，可以在 Meta 上选择吗？  
目前似乎不可用。

 ![Screenshot_20240601_194948](https://global.discourse-cdn.com/meta/original/4X/7/c/1/7c16fc2cbc00db245f90d75a8945f1b7fcc6694b.png)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年七月9日 16:05 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/35 "2024-07-09T16:05:09Z")

</div>

Dracula 在此处 meta 上可用作配色方案选择。

您可以通过访问个人用户偏好设置中的界面偏好设置来找到它。

---

<div class="post-metadata">

### Author: ![Matthias\_Schuster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/matthias_schuster/32/389927_2.png) [@Matthias\_Schuster](https://meta.discourse.org/u/Matthias_Schuster)
#### Post date: [2024年九月1日 10:34 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/38 "2024-09-01T10:34:38Z")

</div>

不，对我来说不是：

 ![Bildschirmfoto_20240901_123400](https://global.discourse-cdn.com/meta/original/4X/a/0/f/a0f36fd4960492baf3add012f0dd979eda507728.png)

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2024年九月3日 11:49 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/40 "2024-09-03T11:49:19Z")

</div>

您现在应该可以在此元页面上的“偏好设置”中的颜色选择器中选择德古拉配色方案了。

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年九月3日 20:48 UTC](https://meta.discourse.org/t/dracula-a-dark-theme-for-discourse/146350/41 "2024-09-03T20:48:16Z")

</div>

4 篇帖子已拆分为新主题：[添加配色方案](https://meta.discourse.org/t/adding-colour-schemes/324770)
