Dracula a Dark Theme for Discourse

jordan.vidrine · 2020 年 3 月 31 日午後 10:13

A theme built on the Dracula color palette. This color scheme has been one of my favorite go to themes in the text editors and other software I use.

I felt like Discourse could use it as well

: Github Repo https://github.com/dracula/discourse

Preview on Theme Creator

How do I install a theme or theme component?

If you see anything off, let me know here and I’ll get that updated! Hope you enjoy

itsbhanusharma · 2020 年 4 月 1 日午前 3:56

This actually looks very neat.

ondrej · 2020 年 4 月 1 日午前 7:35

Looking great, I can definitely feel Dracula vibes.

bubblecatcher · 2020 年 8 月 22 日午後 12:28

are colours fixed or can they be changed?

jordan.vidrine · 2020 年 8 月 25 日午後 10:06

Theme colors are fixed per theme/color scheme once defined. If you would like to customize this for your own use though, feel free to fork the repo and change the colors in the about.json file.

LMD · 2021 年 6 月 23 日午前 1:22

Hello,

In the mobile view, how do I hide the “Replies” column and show the Views column? Thank you.

Update: found the solution for the Replies column, but cannot figure out how to add “Views”

jordan.vidrine · 2021 年 6 月 23 日午後 2:00

We do not show the views count on mobile, only activity and replies. To create your own mobile topic list view, you would need to create a theme-component that edits the mobile topic-list-item template found here:

github.com

discourse/discourse/blob/515fd8a4c32a356a005510fe4a11ce0f976dda27/app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr

<td>
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  {{~#if showMobileAvatar}}
  <div class='pull-left'>
    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
  </div>
  <div class='right'>
    {{else}}
      <div>
        {{/if~}}
        {{!--
          The `~` syntax strip spaces between the elements, making it produce
          `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
          with no space between them.
          This causes the topic-post-badge to be considered the same word as "text"
          at the end of the link, preventing it from line wrapping onto its own line.
        --}}
        {{~raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{~raw-plugin-outlet name="topic-list-before-status"}}

This file has been truncated. show original

An example of someone on this forum who has done something similar can b found in this topic MD Topic List Mobile component.

If you haven’t created a theme or theme-component before, I would suggest reading through this topic that does a great job of explaining the process.

olivia · 2024 年 1 月 17 日午前 8:10

Dracula Theme - 色の問題

説明: DiscourseサイトでDraculaテーマに関する問題が発生しました。テーマの外観が、特に配色とタブの外観において、期待されるものと異なっていました。当初、Draculaを使用している他のサイトとは異なり、テストサイトでテーマが異なって表示されました。GitHubリポジトリから再インストールした後、外観が一致したため、コードや変数の使用が古い可能性が示唆されました。
再現手順:

管理 → カスタマイズ → テーマからDraculaテーマをインストールしました。
デフォルトのテーマとして設定しました。
管理 → カスタマイズの下で、ユーザーの他のテーマと配色オプションを無効にしました。
プロファイル（設定 → インターフェース）で、Draculaのみが選択可能なテーマであることを確認し、デフォルト設定で表示されていることを確認しました。
外観、特にタブが期待通りに表示されていない（テーマに潜在的な問題があることを示唆）ことに気づきました。

スクリーンショット:

プラットフォーム:

Mac (デスクトップ)

ブラウザ:

Chrome

追加コメント: この問題は、テーマで古いCSS変数を使用していることに起因するようです。Draculaテーマの現在の構文（$primary、$tertiary、$secondary）は、最近のDiscourseテーマで使用されている新しい変数形式（var(–tertiary)、var(–secondary)）と比較して廃止されています。これはこのGitHubの例で見られます。この古い変数の使用は、特に代替テーマや配色が選択できない場合に、異常なレンダリングを引き起こしている可能性が高いです。テーマの再インストール後も問題は残っており、テーマのコード構造内のより深い問題を示唆しています。

jordan.vidrine · 2024 年 1 月 17 日午後 9:11

共有ありがとうございます！修正作業を進めています。

Ahmed26 · 2024 年 3 月 21 日午前 6:31

これをテーマとして設定することは可能ですか？

サイドバーのテーマスイッチリストに表示する必要があります。

jordan.vidrine · 2024 年 3 月 21 日午後 4:15

これはメタとサイドバーにインストールするように求めていますか？

カラースキームは、Discourse で選択できるものにもなっています。

Matthias_Schuster · 2024 年 6 月 1 日午後 5:50

はい、メタでこれを選択することは可能ですか？

今のところ、利用できないようです。

jordan.vidrine · 2024 年 7 月 9 日午後 4:05

Dracula は、ここメタで配色テーマの選択肢として利用できます。

ユーザー設定の個人設定エリアでインターフェイス設定にアクセスすることで、そこにたどり着くことができます。

Matthias_Schuster · 2024 年 9 月 1 日午前 10:34

いいえ、私にはそうではありません。

jordan.vidrine · 2024 年 9 月 3 日午前 11:49

これで、metaの環境設定にあるカラーセレクターでDraculaカラースキームを選択できるようになりました。

JammyDodger · 2024 年 9 月 3 日午後 8:48

4件の投稿が新しいトピックに分割されました: カラースキームの追加

トピック		返信	表示
Beginner's guide to using Discourse Themes Site Management reference , customization	11	81370	2025 年 3 月 26 日
🌐 www theme Theme	14	4419	2023 年 10 月 4 日
Coming soon to Meta :new_moon: DARKNESS :new_moon: UX	78	18009	2017 年 5 月 6 日
A reddit-ish theme for Discourse Theme	111	13530	2025 年 11 月 21 日
Alien Night Theme - A free Dark Theme for Discourse Theme	78	27610	2025 年 2 月 4 日

Dracula a Dark Theme for Discourse

関連トピック