Dracula a Dark Theme for Discourse

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 :smile:

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

:vampire: Preview on Theme Creator

:coffin: 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 :smiling_face_with_three_hearts:

43 Likes

This actually looks very neat.

2 Likes

Looking great, I can definitely feel Dracula vibes.

3 Likes

are colours fixed or can they be changed?

2 Likes

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. :vampire:

3 Likes

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”

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:

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.

4 Likes

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:

  1. Installed the Dracula theme via Admin → Customize → Themes.
  2. Set it as the default theme.
  3. Disabled other themes and color scheme options for users under Admin → Customize.
  4. Confirmed in my profile (Preferences → Interface) that Dracula was the only selectable theme, ensuring I viewed it in its default setup.
  5. 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.

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

Is it possible to set this as a theme?

I need to show this in the Sidebar Theme Switch list

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.

1 Like

Yes, is it possible to choose this on meta?

For now, it does not seem to be available.

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.

2 Likes

No, not for me:

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

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