Dracula a Dark Theme for Discourse

theme
1

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:

image
image1193×789 71.8 KB

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

This actually looks very neat.

2 Likes
4

Looking great, I can definitely feel Dracula vibes.

3 Likes
7

are colours fixed or can they be changed?

2 Likes
8

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
21

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”

22

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
30

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:

image
image1380×588 58.2 KB

image
image1380×470 96 KB

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.

31

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

32

Is it possible to set this as a theme?

I need to show this in the Sidebar Theme Switch list

33

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.