Dracula a Dark Theme for Discourse

jordan-vidrine · March 31, 2020, 10:13pm

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 · April 1, 2020, 3:56am

This actually looks very neat.

ondrej · April 1, 2020, 7:35am

Looking great, I can definitely feel Dracula vibes.

bubblecatcher · August 22, 2020, 12:28pm

are colours fixed or can they be changed?

jordan-vidrine · August 25, 2020, 10:06pm

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 · June 23, 2021, 1:22am

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 · June 23, 2021, 2:00pm

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 · January 17, 2024, 8:10am

Dracula Theme - Color Issue

Description: Encountered an issue with the Dracula theme on our Discourse site. The theme’s appearance differs from its expected look, particularly in color schemes and tab appearances. Initially, the theme displayed differently on my test site compared to other sites using Dracula. After reinstalling from the GitHub repository, the appearance aligned, suggesting a potential issue with outdated code or variable usage.
Reproduction Steps:

Installed the Dracula theme via Admin → Customize → Themes.
Set it as the default theme.
Disabled other themes and color scheme options for users under Admin → Customize.
Confirmed in my profile (Preferences → Interface) that Dracula was the only selectable theme, ensuring I viewed it in its default setup.
Noted differences in the appearance, especially the tabs, which didn’t look as expected (indicating a potential issue with the theme).

Screenshots:

Platform:

Mac (Desktop)

Browser:

Chrome

Additional Comments: The issue appears to stem from the use of outdated CSS variables in the theme. The current syntax in the Dracula theme ($primary, $tertiary, $secondary) is obsolete compared to the newer variable format (var(–tertiary), var(–secondary)) used in recent Discourse themes, as seen in this GitHub example. This old variable usage likely causes the unusual rendering, especially when no alternative theme or color scheme is selectable. The problem remained even after a theme reinstallation, indicating a deeper issue within the theme’s code structure.

jordan-vidrine · January 17, 2024, 9:11pm

Thanks for sharing! I have a fix in the works.

Ahmed26 · March 21, 2024, 6:31am

Is it possible to set this as a theme?

I need to show this in the Sidebar Theme Switch list

jordan-vidrine · March 21, 2024, 4:15pm

Are you asking for this to be installed on meta and in the sidebar?

The color scheme is actually one you can select in Discourse now as well.

Matthias_Schuster · June 1, 2024, 5:50pm

Yes, is it possible to choose this on meta?

For now, it does not seem to be available.

jordan-vidrine · July 9, 2024, 4:05pm

Dracula is available as a color scheme choice here on meta.

You can get to it by visiting your interface preferences in your personal user preferences area.

Matthias_Schuster · September 1, 2024, 10:34am

No, not for me:

jordan-vidrine · September 3, 2024, 11:49am

You should now be able to select the Dracula color scheme in the color selector in your preferences here on meta.

JammyDodger · September 3, 2024, 8:48pm

4 posts were split to a new topic: Adding colour schemes

Topic		Replies	Views
Coming soon to Meta :new_moon: DARKNESS :new_moon: UX	78	17817	May 6, 2017
Beginner's guide to using Discourse Themes Site Management reference , customization	26	74001	June 5, 2024
🌐 www theme Theme	18	3808	September 18, 2024
Meta theme-color is not respecting current color scheme Bug	16	5591	November 12, 2022
Ghost Theme Theme official , ghost-theme	41	16967	September 20, 2024

Dracula a Dark Theme for Discourse

Related topics