# 编写一个漂亮的界面...值得提交给上游吗？

**URL:** <https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076>\
**Category:** Development\
**Created:** [2023年三月14日 08:49 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076 "2023-03-14T08:49:18Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [2023年三月14日 08:49 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/1 "2023-03-14T08:49:18Z")

</div>

你好！

上个月，我最喜欢的论坛切换到了 Discourse。这在很大程度上是一次升级，但人们对它的外观和感觉抱怨不已\*。所以我决定解决这个问题，并最终进行了大规模的样式改造。现在我正在考虑是否要努力将其变成一个真正的“主题”并合并到上游，或者这是否不切实际。

我认为其他论坛的用户也可能喜欢它作为一个替代主题，但我不知道将其合并有多困难。我的做法与 Discourse 通常的主题设计大相径庭……这既是吸引力的一部分，也是困难的一部分。

它仍在开发中，但这里有一些截图：

它旨在相对容易地创建和切换多个调色板，并且到目前为止已有三个。

日间模式：

 ![zoom.light.2](https://global.discourse-cdn.com/meta/original/4X/9/b/1/9b18c71095e33ed401d7f109216b9347ad303c75.png)

夜间模式：

 ![zoom.dark.2](https://global.discourse-cdn.com/meta/original/4X/e/b/4/eb47bbf9c7714bc85c91d44225f3b3b7f4f40fce.png)

舒适灰色：

 ![zoom.grey.2](https://global.discourse-cdn.com/meta/original/4X/8/e/7/8e778a6c5eac630852a7b01d0e9ef0efc66ea88c.png)

帖子有 4 种样式：普通（灰色带蓝色标题）、管理员/版主（绿色）、帖子作者（青色）和当前登录用户（紫色或粉色）。所有这些都易于更改。

 ![topic-map.desktop](https://global.discourse-cdn.com/meta/original/4X/1/d/6/1d6460dea5c271755ec8b6086c8bab627f3a0570.png)

编辑器的预览和拖动条与“当前用户”样式匹配。此外，滚动条与页面主题匹配。时间轴的样式也更像滚动条。

 ![editor.dark](https://global.discourse-cdn.com/meta/original/4X/2/f/5/2f5bc5517542ca56d47bb7d3f71dd1aa57b27be4.png)

主题列表尽可能使用单行，并带有虎纹。热图元素看起来更像火焰。

 ![topic-list.light](https://global.discourse-cdn.com/meta/original/4X/8/0/7/8070a781ad7601876a11eb0fc5c738d977355472.png)

 ![topic-list.dark.2](https://global.discourse-cdn.com/meta/original/4X/0/0/7/00782c586c14fce05c11d05dc1b9913d1d3c7dec.png)

用户/通知菜单：

 ![light-theme.tk](https://global.discourse-cdn.com/meta/original/4X/4/7/2/472123ac20f4842d0d6b4057fd69c51c6a710266.png)

嵌入帖子的嵌套更清晰：

 ![embedded-post.light](https://global.discourse-cdn.com/meta/original/4X/9/c/b/9cb4a2b41d4640083840bdd6a1a334fe352a8a64.png)

用户信息卡和链接预览：

 ![discobot-dark](https://global.discourse-cdn.com/meta/original/4X/a/0/8/a08456e204674fdb04628c45130caf29c9b8b96f.png)

目前，它只是一个大的样式表覆盖和一个小的样式表来定义颜色。但如果有可能将主题被上游接受，我可以将其转换为一个真正的 Discourse 主题。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2023年三月14日 08:53 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/2 "2023-03-14T08:53:54Z")

</div>

非常独特，很棒的作品！

（每次主题展示都应该加入聊天机器人 😉 ）

---

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [2023年三月14日 08:59 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/3 "2023-03-14T08:59:38Z")

</div>

哦，嗯，这还在进行中，但如果有人想尝试我目前为止所做的……最简单的方法是在浏览器中本地使用样式表覆盖：

1. 安装 Stylus，如果你还没有的话。
2. 打开一个 Discourse 站点，点击 Stylus 图标。
3. 在“为…编写样式”下，点击“this-site.tld”。
4. 添加一个主题标题。
5. 粘贴下面链接的匹配 CSS 文件中的内容。最好先处理 `style.css` 文件，因为其他文件都依赖它。
6. 保存。
7. 对其他文件重复此操作，每个文件一个主题。
8. 打开基础主题和一个其他主题。关闭其他主题。

> **[GitHub - ToyKeeper/blf-themes: stylesheets for BudgetLightForum](https://github.com/ToyKeeper/blf-themes)**
>
> stylesheets for BudgetLightForum

我还在考虑是否将其转换为可安装的服务器端主题。在我为其创建论坛上，管理员只是安装了 Sam’s Simple Theme 的另一个实例，并将此作为样式表覆盖放在上面……这可行，但并非理想。

---

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [2023年三月14日 09:16 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/4 "2023-03-14T09:16:22Z")

</div>

为了提供背景信息，以下是人们对默认主题的抱怨，以及我试图解决的问题：

- 太普通。
- 空白太多。
- 一次屏幕上显示的信息不够。他们希望信息密度更高。
- 有时不清楚页面元素是否可以点击……例如时间轴小部件中的开始/结束日期。
- 有时不清楚页面元素之间的关系……例如帖子、嵌入式帖子和引语。有些人认为缺乏足够的视觉提示来表示结构。
- 页面元素之间的视觉分隔不够。一切似乎都印在一份连续的文档上。
- 人们特别要求单行主题列表行和虎纹样式。

因此，我选择了一种更紧凑、更丰富多彩、更具三维感、具有更明确视觉结构的主题……就像一叠卡片而不是一份连续的文档。基本上，与最近流行的扁平极简风格正好相反。

极简主题是很好的默认设置，因为它们实用、易于访问且中性。但对于那些想要替代方案的人，我做了一些……不同的东西。😅

---

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [2023年三月15日 06:30 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/5 "2023-03-15T06:30:08Z")

</div>

这仍在进行中，但我已开始为聊天小部件添加支持……

 ![chat.dark](https://global.discourse-cdn.com/meta/original/4X/5/d/0/5d0e1401104730b28fdc88e7441983bfc2fb675b.png)

 ![chat.light](https://global.discourse-cdn.com/meta/original/4X/c/5/f/c5f09e1c8ed8b73d5a0c333fdee48b34e8190e58.png)

---

<div class="post-metadata">

**Author:** ![shyguy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shyguy/32/295079_2.png) [@shyguy](https://meta.discourse.org/u/shyguy)\
**Post date:** [2023年三月15日 06:57 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/6 "2023-03-15T06:57:55Z")

</div>

很棒的工作。我喜欢它。

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [2023年三月15日 15:42 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/7 "2023-03-15T15:42:46Z")

</div>

> [@ToyKeeper](#):
>
> 我觉得其他论坛的用户可能也会把它作为替代主题来欣赏，但我不知道合并起来有多困难。

太棒的主题了！

我已经把你加入了主题作者群组，因此你可以在 #Customization > Theme 下为你的主题创建一个话题，这样人们就可以一键安装到你的实例上。

---

<div class="post-metadata">

**Author:** ![ToyKeeper](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toykeeper/32/297360_2.png) [@ToyKeeper](https://meta.discourse.org/u/ToyKeeper)\
**Post date:** [2023年三月23日 07:48 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/8 "2023-03-23T07:48:31Z")

</div>

谢谢！

我感冒了一段时间，但现在差不多好了，所以希望很快我就可以开始制作一个正式的主题，而不是仅仅覆盖样式表。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2023年三月23日 13:56 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/9 "2023-03-23T13:56:46Z")

</div>

に行って、GitHubに取り込もう！

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2025年十月17日 09:26 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/10 "2025-10-17T09:26:36Z")

</div>

这进展到哪里了？不要让这项伟大的工作无人分享。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2025年十月17日 09:43 UTC](https://meta.discourse.org/t/writing-a-fancy-theme-worth-sending-upstream-or-no/258076/11 "2025-10-17T09:43:15Z")

</div>

> [@ToyKeeper](#):
>
> 太普通了。

顺便说一句，默认主题就是这个作用——它就是用来在此基础上进行构建的。

> [@ToyKeeper](#):
>
> 空白太多了。

点击/触摸目标在一定程度上是这个原因——当你试图用拇指点击某个特定控件时，不要低估间距带来的好处！